Créez votre premier composant

Objectifs de ce chapitre

• ✔️
  Générer un composant

  Découvrez comment créer un nouveau composant à l'aide de la CLI d'Angular.

• ✔️
  Afficher le composant

  Découvrez comment afficher le contenu HTML du composant dans l'application.

CLI d’Angular

Vous avez déjà utilisé la CLI pour lancer notre application localement avec la commande ng serve dans la section Mise en route. Utilisez-le maintenant pour créer un nouveau composant !

La CLI d’Angular fournit une commande pour générer un nouveau composant avec la commande ng generate component nom-du-composant. Vous pouvez aussi utiliser la commande raccourcie ng g c nom-du-composant.

🎓 Instructions

1. Exécutez la commande suivante dans un terminal pour générer un nouveau composant appelé task-list

   ng generate component task-list

   ou

   ng g c task-list

2. Recherchez un nouveau dossier appelé task-list dans le dossier src/app.

Note

Ce nouveau dossier contient les trois fichiers suivants :

• task-list.component.ts (modèle)
• task-list.component.html (vue)
• task-list.component.css (style)

C’est la même structure que le composant AppComponent.

Métadonnées des composants

En ouvrant le fichier task-list.component.ts, vous pouvez voir le code suivant :

task-list.component.ts

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
}

Le décorateur @Component définit les métadonnées de configuration du composant. C’est ici qu’on détermine comment le composant doit être traité, instancié et utilisé au moment de son exécution.

La propriété selector définit le sélecteur d’éléments CSS du composant. En utilisant ce sélecteur dans un Template HTML (vue), Angular crée et affiche une instance du composant.

La propriété templateUrl définit l’emplacement du Template HTML (de sa vue) pour le composant. C’est la vue qui sera affichée lorsque le sélecteur CSS selector sera utilisé dans un autre Template HTML.

La propriété styleUrls définit les emplacements des fichiers CSS du composant. Ces styles seront appliqués au modèle du composant.

Note

Un décorateur est une façon de faire de la méta-programmation. Ils peuvent modifier leur cible (classes, méthodes, …), appeler d’autres méthodes quand la cible est appelée ou ajouter des métadonnées destinées à un framework. Ce dernier point correspond à l’utilisation que l’ont fait dans Angular.

Affichez le composant

Jusqu’à présent, l’application affiche uniquement le contenu HTML du composant app dans le navigateur. Vous avez généré le nouveau composant mais vous devez afficher son contenu HTML en utilisant son sélecteur.

🎓 Instructions

1. Ouvrez le fichier src/app/app.component.html.

2. Ajoutez le sélecteur du composant de la liste de tâches comme suit :

   app.component.html

   <header>
       <h1>Angular Practical course</h1>
   </header>
   
   <main class="container pt-4">
     <app-task-list />
   </main>

3. Vérifiez les modifications dans votre navigateur.

   

Astuce

task-list works! s’affiche dans le navigateur. C’est le contenu généré par défaut par la CLI d’Angular dans le Template HTML du composant. Vous le mettrez à jour dans les prochains chapitres.

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez appris à créer un nouveau composant à l’aide de la CLI d’Angular et à l’utiliser dans votre application.

Vous avez également mémorisé que la vue du composant est son Template HTML et le modèle du composant est son fichier TypeScript.

🔗 Ressources

• Documentation CLI d’Angular: générer un composant