Angular : Découverte des hooks de cycle de vie Partie 1

Angular est un framework web front-end écrit en TypeScript, qui permet aux développeurs web de facilement créer des applications complexes et évolutives.

L'une des caractéristiques d'Angular est la possibilité de travailler avec des composants, ce qui permet aux développeurs de construire des fonctionnalités et des logiques de rendu sous forme de pièces réutilisables.

Dans cet article nous allons parler des composants Angular et plus précisément des méthodes de cycle de vie d'un composant Angular (lifecycle Cook). Le cycle de vie d'un composant Angular décrit l'ensemble des phases que traverse un composant depuis sa création jusqu'à sa destruction. Dans le cycle de vie d'un composant nous avons huit (8) méthodes, qui si on peut le dire représentent les phases mentionnées un peu plus haut. Il s'agit des méthodes ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy.

Le hook ngOnChanges en théorie

Dans cette première partie nous allons découvrir uniquement le premier hook de cycle de vie, il s'agit de ngOnChanges, aller on se lance 😎😎😎😎.

Le hook ngOnChanges est appelé chaque fois qu'une ou plusieurs propriétés @Input du composant changent, ngOnChanges est utile pour réagir aux modifications des données d'entrée (@Input) dans un composant enfant par son composant parent.

• ngOnChanges est invoqué chaque fois qu'une propriété @Input du composant est modifiée ou initialisée par le composant parent.

• Lorsque vous utilisez ngOnChanges, il est conseillé d'utiliser SimpleChanges pour accéder aux modifications. SimpleChanges est un objet qui contient les informations sur les propriétés @Input qui ont changé, y compris leurs anciennes et nouvelles valeurs. Cela permet de gérer les changements de manière plus précise et évite les erreurs potentielles liées à l'accès à des propriétés qui peuvent encore être undefined.

Le hook ngOnChanges dans la pratique:

Pour les besoins de notre exemple je vais créer deux composants, un composant parent(app-parent) et un autre enfant (app-child) en gros le composant app-child sera utilisé dans le composant app-parent, nous avons donc un lien de parent enfant .....

Voici le composant parent (app-parent)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <a (click)="changeFromParent()">Change from parent</a>
    <br/>
    <app-child [parentData]=data></app-child>
  `
})
export class ParentComponent {
  data = 0
  constructor() {}
  changeFromParent(){
    this.data += 1;
  }
}

Le composant app-parent ci-dessus est un composant Angular très simple qui a une propriété data initialisée à 0, la méthode changeFromParent nous permet d'incrémenter la valeur de la propriété dataà chaque clique sur le lien contenu dans le template.

Noter l'utilisation de <app-child [parentData]=data></app-child> dans le template, il s'agit du composant app-child que nous allons créer un peu plus bas, app-child attend en entrée un @Input() que nous allons appéllé ici parentData nous lui attribuons la valeur de la props data ici . Notre composant app-parent est prêt 😌😌 et utilise bien le composant enfant app-child.

Le composant enfant (app-child)

import { Component, OnInit, Input, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <a (click)="changeFromChild()">Changer from child</a>
    <br/>
    {{parentData}}
  `    
})
export class ChildComponent implements OnChanges{
  @Input() parentData: number;
  constructor() {}

  changeFromChild(){
    this.parentData -= 1;
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes)
  }
}

Bon, tombons sur notre app-child composant 😄😄, que se passe t'il dans ce dernier ?

Comme je l'avais mentionné un peu plus haut, le composant app-child, attend un props d'entrée il s'agit de parentData déclarer dans le composant gràce au code @Input() parentData: number;.

Mais attends un peu c'est quoi @Input() ? 🥲, Il s'agit d'un décorateur fournie par Angular qui permet de passer des données d'un composant parent vers un composant enfant. Ce décorateur est essentiel pour établir une communication fluide entre les composants, facilitant ainsi la gestion du flux de données et la création de composants UI réutilisables et modulaires. (https://angular.dev/guide/components/inputs)

changeFromChil nous permet juste de décrémenter la valeur du props parentData, lorsque l'utilisateur clique sur le lien dans la vue de notre composant app-child .

Et pour fini nous avons notre hook ngOnChanges dans lequelle nous faisons juste un log de la changes param.

Dans notre exemple, chaque fois que la propriété parentData, change le hook ngOnChanges est appellé, cela peut etre utilise pour faire des actions selon le besoin dans le composant app-children .

En conclusion ngOnChanges peut être utilisé pour réagir aux changements de propriétés @Input de manière flexible et conditionnelle, permettant ainsi de gérer efficacement les mises à jour de l'état du composant en réponse aux modifications des données entrantes.