Angular - 5.14-Comprendre le cycle de vie des composants

Angular pilote chaque composant à travers plusieurs étapes — création, mise à jour, destruction — et expose à chacune un hook de cycle de vie sur lequel on peut se brancher pour exécuter du code. Voici les premiers crochets utiles à connaître, dans l'ordre où ils s'exécutent.

Les premiers hooks

• ngOnChanges : appelé une première fois quand le composant est créé, puis à chaque fois qu'une propriété décorée par @Input() reçoit une nouvelle valeur. Il peut donc être exécuté plusieurs fois au cours de la vie du composant.
• ngOnInit : exécuté une seule fois, juste après le constructeur, dès qu'Angular a fini l'initialisation de base du composant. À ce moment-là, le composant n'est pas encore visible dans le DOM, mais ses propriétés (notamment les @Input()) sont déjà accessibles et utilisables. C'est l'endroit idéal pour initialiser des données.
• ngDoCheck : exécuté à chaque cycle de détection de changement Angular — pas seulement quand quelque chose change vraiment. Cela inclut les clics, les saisies, les timers, et tout événement qui peut potentiellement modifier l'état. Angular l'appelle pour vous donner l'occasion d'effectuer une logique de détection personnalisée. À utiliser avec parcimonie car il s'exécute souvent.

La détection de changement est le mécanisme par lequel Angular décide qu'un fragment de template doit être re-rendu. Si une propriété passe de 1 à 2 et qu'elle est affichée dans le template, Angular doit rafraîchir cette portion : c'est lors de cette vérification que ngDoCheck est déclenché. À retenir : Angular effectue ces vérifications à chaque événement déclencheur (clic, requête HTTP qui revient, timer), même si rien n'a réellement changé — d'où la nécessité de garder ngDoCheck très léger.