Angular - Cycle de vie d'un composant

Dans cet article, vous allez découvrir le cycle de vie d'un Component Angular en détail.

Définition

Le cycle de vie correspond aux différentes étapes de la vie d'une instance. Il débute toujours par une instanciation et termine par la destruction de l'instance, donc la désallocation des ressources mémoire qui lui sont affectées.

Un hook (crochet) est une méthode qui s'exécute lors de certains évènements liés au cycle de vie. Cela permet à votre app Angular d'exécuter du code JavaScript lors de ces évènements.

Cela peut s'avérer utile, par exemple pour lancer un appel vers une API au chargement d'une page ou bien pour libérer une ressource lors de la destruction de l'instance du composant.

Les étapes du cycle de vie (dans l'ordre)

Cycle de vie d'un composant Angular

Sur ce diagramme, vous observez l'ordre d'enchainement des hooks en vous fiant aux numéros inscrits à côté de chaque étape.

Voici un détail de chacun de ces hooks, dans l'ordre où ils sont appelés.

1. Le constructeur

Le cycle commence par l'appel du constructeur, juste après l'instanciation du Component.

Dans le constructeur, placez uniquement les initialisations de variable locales avec des valeurs simples.

code

Ne placez aucune initialisation complexe dans le constructeur. Vous voulez des Component qui se contruisent sans consommer beaucoup de ressources et de manière sure.

2. Détecter les changements d'Input

Angular appelle le hook ngOnChanges() dès qu'il détecte un changement dans les propriétés passées en Input.

code

3. Initialiser le composant

Utilisez la méthode ngOnInit() dans les 2 cas suivants :

  • Vous voulez mettre en place une initialisation complexe (donc hors du constructeur), typiquement appeler une API qui charge les données de votre page.

  • Vous devez modifier l'état de votre component après le chargement des attributs passés en @Input
code

4. Réagir à tous les changements du DOM

Vous souhaitez réagir à un changement du DOM qui est indétectable par vos autres hooks ?

Dans ce cas vous devrez utiliser la méthode ngDoCheck()

code

Cette méthode vous permet de réagir à tout changement dans la page qui ne serait pas détecté par le framework.

Attention à ne pas l'utiliser plus que nécessaire : cette méthode coûte énormément de ressources et peut donc diminuer les performances globales de votre application.

5. Détecter les changements de ng-content

La méthode ngAfterContentInit() est déclenchée lorsque le contenu de la balise ng-content est reçu pour la première fois.

ngAfterContentchecked() est déclenchée à chaque fois que le contenu de cette balise est modifié dynamiquement.

code

6. Accéder au DOM

La méthode ngAfterViewInit() est déclenchée lorsque le contenu des variables décorées par @ViewChild ou @ViewChildren est reçu pour la première fois.

ngAfterViewchecked() est déclenchée à chaque fois que le contenu de ces variables est modifié.

code

7. Détruire l'instance proprement

Le hook ngOnDestroy() vous permet de libérer des ressources avant la destruction de l'instance du composant.

  • Appliquez unsubscribe() aux Observables auxquels le composant est souscrit.
  • Arrêtez vos timers
  • Désouscrivez-vous également des Promise et callbacks qui viennent de services partageables.

ngOnDestroy() peut aussi servir à envoyer un Event pour signaler la destruction à un autre Component.

code
La prochaine étape, quand vous êtes à l'aise avec le concept de composants : Les services Angular.

Sources