Composer des composants

Vous avez appris à mettre à jour le template, la logique et les styles d'un composant, mais comment utiliser un composant dans votre application ?

La propriété selector de la configuration du composant vous donne un nom à utiliser pour référencer le composant dans un autre template. Vous utilisez le selector comme une balise HTML : par exemple, app-user devient <app-user /> dans le template.

Dans cette activité, vous allez apprendre à composer des composants.

Dans cet exemple, il y a deux composants, User et App.

1. Ajouter une référence à User

   Mettez à jour le template de App pour y inclure une référence à User, qui utilise le selector app-user. Pensez à ajouter User au tableau imports de App : cela le rend utilisable dans le template de App.

   template: `<app-user />`, imports: [User]

   Le composant affiche maintenant le message Username: youngTech. Vous pouvez mettre à jour le code du template pour y ajouter davantage de balisage.

2. Ajouter davantage de balisage

   Comme vous pouvez utiliser n'importe quel balisage HTML dans un template, essayez de mettre à jour le template de App pour qu'il contienne aussi d'autres éléments HTML. Cet exemple ajoute un élément <section> comme parent de l'élément <app-user>.

   template: `
   <section><app-user /></section>
   `,

Vous pouvez utiliser autant de balisage HTML et de composants que nécessaire pour concrétiser votre idée d'application. Vous pouvez même avoir plusieurs exemplaires de votre composant sur la même page.

Cela nous amène à une bonne question : comment afficher un composant de façon conditionnelle en fonction des données ? Passez à la section suivante pour le découvrir.