Skip to content

C'est quoi le cycle de vie dans les composants Angular ?

Le cycle de vie d'un composant Angular désigne l'ensemble des étapes que suit le composant depuis sa création jusqu'à sa destruction. Angular fournit plusieurs points de repère tout au long de ce cycle de vie, appelés "méthodes de cycle de vie", auxquels vous pouvez vous connecter pour exécuter du code à des moments précis du cycle de vie de votre composant.

Voici une explication de chaque étape du cycle de vie du composant :

  1. Création du composant : le composant est créé.
  2. Injection des dépendances : les dépendances du composant (par exemple, les services) sont injectées.
  3. Envoi des données d'entrée : le composant parent envoie les données d'entrée au composant enfant.
  4. Initialisation des données d'entrée : le composant enfant initialise ses données d'entrée avec les valeurs fournies par le composant parent.
  5. Création du template : le template du composant est compilé et le rendu est effectué.
  6. Exécution du composant : le composant est en cours d'exécution et interagit avec l'utilisateur.
  7. Interactions avec l'utilisateur : le composant réagit aux événements de l'utilisateur (par exemple, les clics sur des boutons).
  8. Destruction du composant : le composant est détruit et ses ressources sont libérées.
  9. Nettoyage des ressources : le composant effectue le nettoyage des ressources (par exemple, les abonnements aux observables).

Voici les principales méthodes de cycle de vie d'un composant Angular, qui sont appelées à différents moments du cycle de vie du composant :

ngOnInit

Appelée une seule fois après l'initialisation du composant.

En détails: ngOnInit

ngOnChanges

Appelée chaque fois que des modifications sont apportées aux propriétés de l'objet d'entrée du composant.

En détails: ngOnChanges

ngDoCheck

Appelée à chaque itération de la boucle de vérification de l'état du composant.

En détails: ngDoCheck

ngAfterContentInit

Appelée une seule fois après que le contenu du composant est initialisé.

En détails: ngAfterContentInit

ngAfterContentChecked

Appelée à chaque itération de la boucle de vérification du contenu du composant.

En détails: ngAfterContentChecked

ngAfterViewInit

Appelée une seule fois après que la vue du composant est initialisée.

En détails: ngAfterViewInit

ngAfterViewChecked

Appelée à chaque itération de la boucle de vérification de la vue du composant.

En détails: ngAfterViewChecked

ngOnDestroy

Appelée avant la destruction du composant.

En détails: ngOnDestroy