1. Qu’est-ce qu’un composant Angular ?
Avant de parler du cycle de vie, il est essentiel que tu comprennes bien ce qu’est un composant Angular.
Un composant, c’est en quelque sorte de cœur d’une application Angular. Il contient la logique qui contrôle une partie de l’écran appelée vue.
2. Les hooks du cycle de vie des composants
Le cycle de vie d’un composant Angular est composé de différentes étapes, depuis sa création jusqu’à sa destruction. Angular fournit plusieurs hooks (méthodes spéciales) qui sont appelés à différentes étapes du cycle de vie d’un composant. En implémentant ces hooks dans la classe d’un composant, tu peux ajouter des comportements personnalisés et gérer efficacement les ressources de ton application.
2.1. ngOnChanges()
Ce hook est appelé lorsque l’une des propriétés liées aux données d’un composant change. Il est souvent utilisé pour réagir aux modifications des propriétés d’entrée (@Input) transmises par le composant parent. La méthode ngOnChanges() reçoit un objet SimpleChanges qui contient les valeurs actuelles et précédentes des propriétés modifiées.
Exemple d’utilisation :
import { Component, Input, OnChanges, SimpleChanges } from ‘@angular/core’;
@Component({
selector: ‘app-child’,
template: `…`
})
export class ChildComponent implements OnChanges {
@Input() data: string;
ngOnChanges(changes: SimpleChanges): void {
if (changes.data) {
console.log(‘Data changed:’, changes.data.currentValue);
}
}
}
2.2. ngOnInit()
Ce hook est appelé une fois, juste après la création du composant et l’initialisation de ses propriétés d’entrée. Il est généralement utilisé pour initialiser les propriétés du composant, charger les données ou effectuer toute autre opération de configuration.
Exemple d’utilisation :
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-example’,
template: `…`
})
export class ExampleComponent implements OnInit {
data: any;
ngOnInit(): void {
this.loadData();
}
loadData(): void {
// Charger les données à partir d’un service ou d’une API
}
}
2.3. ngDoCheck()
Ce hook est appelé à chaque cycle de détection des changements d’Angular. Il est généralement utilisé pour implémenter des vérifications personnalisées lorsque les mécaniques de détection des changements intégrés ne sont pas suffisantes.
Exemple d’utilisation :
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-example’,
template: `…`
})
export class ExampleComponent implements OnInit {
data: any;
ngOnInit(): void {
this.loadData();
}
loadData(): void {
// Charger les données à partir d’un service ou d’une API
}
}
2.4. ngAfterContentInit() et ngAfterContentChecked()
Ces hooks sont appelés respectivement après l’initialisation et après chaque vérification du contenu enfant d’un composant (c’est-à-dire les éléments projetés à l’intérieur d’une balise <ng-content>). Ils sont souvent utilisés pour effectuer des actions liées au contenu enfant ou pour réagir à des modifications du contenu.
Exemple d’utilisation :
import { Component, AfterContentInit, AfterContentChecked } from ‘@angular/core’;
@Component({
selector: ‘app-example’,
template: `…`
})
export class ExampleComponent implements AfterContentInit, AfterContentChecked {
ngAfterContentInit(): void {
console.log(‘Contenu initialisé’);
}
ngAfterContentChecked(): void {
console.log(‘Contenu vérifié’);
}
}
2.5. ngAfterViewInit() et ngAfterViewChecked()
Ces hooks sont appelés respectivement après l’initialisation et après chaque vérification de la vue d’un composant (c’est-à-dire les éléments du modèle et les vues enfants). Ils sont souvent utilisés pour effectuer des actions liées à la vue du composant, comme la manipulation du DOM, l’ajout de comportements d’animation ou la réaction aux modifications de la vue.
Il est important de noter que, lors de l’utilisation de ces hooks, tu ne dois pas modifier les liaisons de données, car cela provoquerait une exception pour la détection des changements. Si tu dois modifier les liaisons de données, utilise plutôt ngAfterContentChecked() ou ngDoCheck().
Exemple d’utilisation :
import {
Component,
AfterViewInit,
AfterViewChecked,
ViewChild,
ElementRef,
} from ‘@angular/core’;
@Component({
selector: ‘app-example’,
template: `
<div #exampleDiv>Contenu exemple</div>
`,
})
export class ExampleComponent implements AfterViewInit, AfterViewChecked {
@ViewChild(‘exampleDiv’) exampleDiv: ElementRef;
ngAfterViewInit(): void {
console.log(‘Vue initialisée’);
this.updateDOM();
}
ngAfterViewChecked(): void {
console.log(‘Vue vérifiée’);
}
updateDOM(): void {
// Logique personnalisée de manipulation du DOM
}
}
2.6. ngOnDestroy()
Ce hook est appelé juste avant la destruction du composant. Il est généralement utilisé pour nettoyer les ressources allouées par le composant, comme les abonnements aux observables, les timers ou les évènements DOM.
Exemple d’utilisation :
import { Component, OnDestroy } from ‘@angular/core’;
import { Subscription } from ‘rxjs’;
import { DataService } from ‘./data.service’;
@Component({
selector: ‘app-example’,
template: `…`,
})
export class ExampleComponent implements OnDestroy {
private dataSubscription: Subscription;
constructor(private dataService: DataService) {
this.dataSubscription = this.dataService.getData().subscribe((data) => {
console.log(‘Données reçues :’, data);
});
}
ngOnDestroy(): void {
this.dataSubscription.unsubscribe();
}
}
En résumé, les hooks du cycle de vie des composants Angular offrent des points d’accès pour gérer les différentes étapes du cycle de vie d’un composant, de sa création à sa destruction. Ils permettent d’ajouter des comportements personnalisés et de gérer efficacement les ressources de ton application en fonction des besoins spécifiques de chaque composant.
3. Les phases du cycle de vie des composants
Le cycle de vie d’un composant Angular peut être divisé en plusieurs phases distinctes. Chaque phase correspond à un état spécifique du composant et est associée à un ou plusieurs hook. Les phases clés du cycle de vie d’un composant sont les suivantes :
3.1. Création du composant
La phase de création du composant commence lorsque Angular créé une nouvelle instance du composant. Cette phase comprend les étapes suivantes :
- Construction de l’instance du composant : Angular appelle le constructeur de la classe du composant pour créer une nouvelle instance. Tu peux injecter des dépendances dans le constructeur, tel que les services ou les références à d’autres composants.
- Initialisation des propriétés d’entrée (@Input) : Angular initialise les propriétés d’entrée du composant avec les valeurs fournies par le composant parent.
- Appel du hook ngOnChanges() : Si des propriétés d’entrée ont été modifiées lors de l’initialisation, Angular appelle le hook ngOnChanges().
- Appel du hook ngOnInit() : Angular appelle ce hook pour signaler que le composant a été correctement initialisé et que les propriétés d’entrée ont été définies. Tu peux utiliser ce hook pour effectuer des opérations de configuration ou pour charger des données.
3.2. Mise à jour du composant
La phase de mise à jour du composant se produit lorsque Angular détecte des modifications dans les données liées au composant ou dans sa structure interne. Cette phrase comprend les étapes suivantes :
- Appel du hook ngOnChanges() : Si des propriétés d’entrée ont été modifiées depuis la dernière vérification, Angular appelle le hook ngOnChanges().
- Appel du hook ngDoCheck() : Angular appelle ce hook pour signaler le début de la détection des changements. Tu peux utiliser ce hook pour effectuer des vérifications personnalisées ou pour mettre à jour le composant en fonction des modifications externes.
- Appel du hook ngAfterContentChecked() : Angular appelle ce hook après avoir vérifié le contenu enfant du composant (éléments projetés à l’intérieur d’une balise <ng-content>).
- Appel du hook ngAfterViewChecked() : Angular appelle ce hook après avoir vérifié la vue du composant (élément du modèle et vues enfants).
3.3. Destruction du composant
La phase de destruction du composant se produit lorsque Angular supprime un composant de la structure de l’application, par exemple lors de la navigation entre les routes ou lorsque le composant est supprimé du DOM par une directive *ngIf. Cette phase comprend les étapes suivantes :
- Appel du hook ngOnDestroy() : Angular appelle ce hook pour signaler que le composant est sur le point d’être détruit. Tu peux utiliser ce hook pour nettoyer les ressources allouées par le composant, telles que les abonnements aux observables, les timers ou les événements DOM.
- Suppression du composant du DOM : Angular supprime le composant et ses éléments associés du DOM.
4. Utilisation des hooks du cycle de vie dans Visual Studio Code
Visual Studio Code (VSCode) est un éditeur de code populaire qui offre une excellente prise en charge d’Angular et de TypeScript.
4.1. Créer un nouveau projet Angular
- Ouvre Visual Studio Code.
- Ouvre le terminal intégré (Ctrl + `) et assure-toi que tu as installé Angular CLI. Si ce n’est pas le cas, installe-le en exécutant la commande npm install -g @angular/cli`.
- Crée un nouveau projet Angular en exécutant la commande ng new mon-projet (remplace « mon-projet » par le nom de ton projet).
- Accède au répertoire du projet nouvellement créé en exécutant cd mon-projet.
- Ouvre le projet dans VSCode en exécutant la commande code.
4.2. Ajouter un nouveau composant
Dans le terminal intégré, exécute la commande ng generate component mon-composant (remplace « mon-composant » par le nom de ton composant).
Dans l’arborescence des fichiers, accède au fichier src/app/mon-composant/mon-composant.component.ts et ouvre-le.
4.3. Implémente les hooks du cycle de vie
1. Importe les interfaces correspondant aux hooks du cycle de vie que tu souhaites utiliser. Par exemple, pour utiliser OnInit, ajoute l’importation suivante en haut du fichier :
import { OnInit } from ‘@angular/core’;
2. Implémente l’interface sur la classe du composant. Par exemple, pour implémenter OnInit, modifie la déclaration de classe comme suit :
export class MonComposantComponent implements OnInit {
3. Ajoute la méthode correspondant au hook du cycle de vie que tu souhaites utiliser. Par exemple, pour utiliser ngOnInit, ajoute la méthode suivante dans la classe du composant :
// Ta logique de hook ici
}
4. Répète ces étapes pour chaque hook du cycle de vie que tu souhaites utiliser. Assure-toi d’importer l’interface appropriée et d’ajouter la méthode correspondante dans la classe du composant.
4.4. Exemple complet
Voici un exemple de fichier mon-composant.component.ts qui implémente les hooks OnInit, OnChanges et OnDestroy :
import { Component, OnInit, OnChanges, OnDestroy, Input, SimpleChanges } from ‘@angular/core’;
@Component({
selector: ‘app-mon-composant’,
templateUrl: ‘./mon-composant.component.html’,
styleUrls: [‘./mon-composant.component.scss’]
})
export class MonComposantComponent implements OnInit, OnChanges, OnDestroy {
@Input() exempleProp: string;
constructor() { }
ngOnInit(): void {
console.log(‘ngOnInit’);
// Ta logique de hook ici
}
ngOnChanges(changes: SimpleChanges): void {
console.log(‘ngOnChanges’, changes);
// Ta logique de hook ici
}
ngOnDestroy(): void {
console.log(‘ngOnDestroy’);
}
}
En suivant ces bonnes pratiques et astuces, tu peux créer des composants Angular plus performants, maintenables et faciles à comprendre.