📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

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

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !