Composants enfants dans Angular

Comme mentionné au tout début du tutoriel, dans Angular, l'ensemble du projet est décomposé en composants. Dans les leçons précédentes, nous avons travaillé uniquement avec le composant principal, créé par défaut. Apprenons maintenant à créer des composants enfants.

Le code des nouveaux composants est généré automatiquement par Angular à l'aide d'une commande spéciale dans le terminal : generate component. Après le mot component, vous devez écrire le nom de notre nouveau composant. Supposons que nous souhaitons générer un composant user :

ng generate component user

Après l'exécution de la commande, nous verrons qu'une nouveau dossier app/user est apparu. Il contiendra tous les fichiers standard du composant.

Dans le fichier du composant user.component.ts, un décorateur de composant sera automatiquement créé :

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Également, dans ce fichier, une classe de composant sera automatiquement créée :

export class UserComponent {

}

Maintenant, nous devons connecter notre composant enfant au composant parent. Soit le composant parent le composant app, présent initialement lors de l'installation du framework. Importons notre composant dans celui-ci :

import { UserComponent } from './user/user.component';

Dans le décorateur du composant, dans la clé imports, indiquons notre composant importé :

@Component({
	selector: 'app-root',
	imports: [UserComponent], // ici
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Maintenant, nous pouvons afficher le contenu du composant enfant dans le parent. Pour cela, dans le fichier du template du parent, nous devons écrire une balise spéciale, dont le nom est défini dans la propriété selector du décorateur @Component de l'enfant. Dans notre cas, c'est la balise app-user. Écrivons-la dans le template du parent :

some text
<app-user></app-user>

Générez le composant ProductComponent. Connectez ce composant au composant principal de votre projet.

Apportez des modifications dans le template du composant enfant. Assurez-vous qu'elles s'appliquent dans le navigateur.

Modifiez les styles CSS du composant enfant. Assurez-vous qu'ils s'appliquent dans le navigateur.

Dans le composant enfant, créez les propriétés name et price. Affichez leurs valeurs dans le template du composant enfant.