Angular - 2-7 Création de composants avec le CLI et imbrication de componants
Jusqu'ici nous avons créé un composant à la main. Il existe une alternative bien plus
rapide : la commande ng generate du CLI Angular. Pour l'utiliser, on
ouvre un nouveau terminal en laissant la fenêtre ng serve active — c'est
important, ne la fermez pas. Dans cette nouvelle fenêtre, on appelle la CLI pour
créer un composant servers destiné à contenir plusieurs
app-server imbriqués.
La commande ng generate
La commande génère le dossier, les fichiers (HTML, CSS, TS et le fichier
.spec utilisé pour les tests, qu'on peut supprimer pour l'instant) et
met à jour automatiquement AppModule avec l'import et la déclaration.
Deux écritures équivalentes :
- la forme longue :
ng generate component servers; - le raccourci très utilisé :
ng g c servers.
Dans le template de ce nouveau servers.component.html, on remplace le
paragraphe par défaut par deux fois <app-server></app-server> :
les composants sont réutilisables, on peut utiliser le même sélecteur autant de fois
qu'on veut pour répliquer un comportement et son apparence.
On vérifie ensuite le sélecteur du nouveau composant dans
servers.component.ts (ici app-servers), puis on met à jour
app.component.html pour pointer vers ce nouveau composant à la place de
l'ancien. Une fois sauvegardé, l'application a presque la même apparence — on voit
bien deux app-server, mais en inspectant le DOM via les outils Chrome on
constate qu'ils sont désormais imbriqués à l'intérieur du composant
app-servers. Nous avons donc appris à créer un composant manuellement ou
avec la CLI, à les imbriquer les uns dans les autres et à réutiliser un sélecteur
plusieurs fois.
En résumé
Cette leçon explique deux approches pour créer un composant Angular : la création manuelle (dossier + fichiers) et l'utilisation du CLI avec la commande ng generate component. Elle démontre comment Angular génère automatiquement les fichiers nécessaires (HTML, CSS, TypeScript, spec) et comment mettre à jour le module pour enregistrer le nouveau composant. L'imbrication de composants est illustrée en utilisant le sélecteur d'un composant dans le template d'un autre pour réutiliser et structurer hiérarchiquement les composants.
Points clés
- La commande ng generate component (ou ng g c) crée automatiquement un dossier et tous les fichiers nécessaires pour un composant
- Le CLI met à jour automatiquement le module d'application (app.module.ts) avec l'importation et la déclaration du nouveau composant
- Les composants sont réutilisables : on peut utiliser le même sélecteur plusieurs fois dans un template pour réutiliser le composant
- L'imbrication de composants s'effectue en intégrant le sélecteur du composant enfant dans le template du composant parent
- Il est important de laisser ng serve actif dans une autre fenêtre terminal pour que les changements se reflètent en temps réel
- L'inspecteur Chrome permet de visualiser la hiérarchie des composants imbriqués dans l'arborescence DOM
Questions fréquentes
Quelle est la différence entre créer un composant manuellement et via le CLI ?
La création manuelle implique de créer les dossiers et fichiers à la main. Le CLI génère automatiquement la structure complète avec tous les fichiers nécessaires (HTML, CSS, TypeScript, spec) et met à jour automatiquement le module d'application. C'est plus rapide et évite les erreurs.
Comment réutiliser un composant dans un autre composant ?
On utilise le sélecteur du composant comme une balise HTML dans le template du composant parent. Par exemple, si le sélecteur est app-server, on l'ajoute dans le template HTML du parent avec <app-server></app-server> autant de fois qu'on souhaite réutiliser le composant.
Pourquoi est-il important de laisser ng serve actif ?
ng serve compile et rafraîchit l'application en temps réel lors de chaque modification. Si on le ferme, les changements ne seront pas visibles dans le navigateur et il faudrait relancer la commande manuellement.