CHAPITRE 6 : LES COMPOSANTS, CŒUR D'ANGULAR

Le composant est la notion centrale d'Angular. Une application n'est rien d'autre qu'un assemblage de composants. Maîtrisez ce chapitre, et le reste suivra.

1. Qu'est-ce qu'un composant ?

Un composant est un morceau d'interface autonome : un en-tête, une carte produit, un formulaire. Il réunit trois choses :

• un template : le HTML affiché ;
• une classe : les données et la logique ;
• un style : le CSS, qui ne s'applique qu'à lui.

Ce dernier point mérite attention : le CSS d'un composant est isolé. Une règle h1 { color: red } écrite dans un composant ne touchera pas les h1 des autres. C'est une sécurité appréciable sur un gros projet.

2. Anatomie d'un composant

import { Component } from '@angular/core';

@Component({
  selector: 'app-carte-etudiant',
  templateUrl: './carte-etudiant.component.html',
  styleUrls: ['./carte-etudiant.component.css']
})
export class CarteEtudiantComponent {
  nom = 'Awa Ngono';
  matricule = '19A123';
  moyenne = 15.5;

  estAdmis(): boolean {
    return this.moyenne >= 10;
  }
}

Le décorateur @Component

Le préfixe app- du sélecteur est une convention : il évite tout conflit avec une balise HTML existante.

3. Générer un composant

ng generate component carte-etudiant

# forme abregee
ng g c carte-etudiant

La CLI crée les trois fichiers, plus un fichier de test, et déclare automatiquement le composant dans app.module.ts. C'est cette dernière étape que l'on oublie quand on crée les fichiers à la main : d'où l'erreur « app-carte-etudiant is not a known element ».

4. Afficher un composant

Dans le template d'un autre composant, utilisez son sélecteur comme une balise :

<h1>Liste des etudiants</h1>
<app-carte-etudiant></app-carte-etudiant>
<app-carte-etudiant></app-carte-etudiant>

Chaque balise crée une instance indépendante, avec ses propres données.

5. Une arborescence de composants

AppComponent
├── EnteteComponent
├── ListeEtudiantsComponent
│   ├── CarteEtudiantComponent
│   └── CarteEtudiantComponent
└── PiedPageComponent

Un composant en contient d'autres, qui en contiennent d'autres. C'est l'architecture de toute application Angular.

6. Découper au bon grain

Question fréquente : jusqu'où découper ? Trois critères pratiques :

• l'élément est réutilisé à plusieurs endroits ;
• il a une responsabilité claire, qu'on peut nommer en deux mots ;
• son fichier devient trop long (au-delà de 150 lignes, posez-vous la question).

À retenir

• Un composant réunit un template, une classe et un style isolé
• @Component le décrit ; selector donne la balise
• ng g c nom le crée et le déclare automatiquement
• Une application est un arbre de composants