Comprendre les composants Angular

Les composants sont les éléments de base des applications Angular. Dans cette leçon, vous découvrirez les composants et leur cycle de vie.

Qu’est-ce qu’un composant ?

Un composant est un élément d’interface utilisateur qui inclut du code HTML, CSS et TypeScript. Il représente une partie de l’interface utilisateur de votre application.

Créer un composant

Utilisez Angular CLI pour créer facilement un composant :

ng generate component my-component

ng generate component my-component

Structure d’un composant

Un composant Angular comporte généralement quatre fichiers principaux :

• .html : modèle
• .ts : logique
• .css : styles
• .spec.ts : vérification

Décorateur de composant

Le décorateur @Component associe la classe de votre composant à son modèle et à ses styles.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Crochets du cycle de vie

Les composants Angular disposent de crochets du cycle de vie qui vous permettent d’exécuter du code à des moments précis. Les crochets courants comprennent ngOnInit() et ngOnDestroy().

Utiliser ngOnInit()

ngOnInit() s’exécute après qu’Angular a initialisé les données du composant. Il est idéal pour la configuration initiale :

ngOnInit() {
  console.log('Component initialized!');
}

Afficher les composants

Utilisez le sélecteur de votre composant dans d’autres modèles pour l’afficher :

<app-my-component></app-my-component>

Résumé

Vous avez découvert les composants, appris à les créer et étudié leurs crochets du cycle de vie. Excellent travail !