8. Plongée au cœur des composants
Les composants sont les briques de base des interfaces Angular. Un composant contrôle une section de l'écran, ou une vue, et gère les interactions utilisateur pour cette vue.
Structure d'un composant
Chaque composant se compose de trois parties :
- La Classe (.ts) : Contient les données (propriétés) et la logique (méthodes).
- Le Template (.html) : Définit la structure de l'interface utilisateur du composant.
- Les Métadonnées (
@Component) : Configurent le composant, liant la classe au template et au sélecteur.
Créer un nouveau composant via le CLI
bash ng generate component user-profile // ou le raccourci ng g c user-profile
Cette commande génère quatre fichiers :
user-profile.component.tsuser-profile.component.htmluser-profile.component.cssuser-profile.component.spec.ts(pour les tests)
Elle met également à jour automatiquement le NgModule le plus proche (AppModule) en ajoutant UserProfileComponent au tableau declarations.
Exemple de métadonnées de composant
typescript import { Component } from '@angular/core';
@Component({ selector: 'app-user-profile', // Comment le composant est utilisé dans le HTML templateUrl: './user-profile.component.html', // Lien vers la vue styleUrls: ['./user-profile.component.css'] // Lien vers les styles spécifiques }) export class UserProfileComponent { userName: string = 'Alex Johnson'; isActive: boolean = true;
toggleStatus(): void { this.isActive = !this.isActive; } }
Pour utiliser ce composant, il suffit de placer sa balise de sélecteur dans le template d'un autre composant :
html