Qu’est-ce que le cycle de vie Angular ?
En Angular, le cycle de vie d’un composant (ou Angular Component Lifecycle) comprend toutes les étapes par lesquelles passe un composant ou une directive depuis sa création jusqu’à sa destruction.
Angular met à disposition des hooks (méthodes spéciales) permettant d’agir à des moments précis, pour :
- Initialiser des variables ou charger des données
- Réagir aux changements des entrées (
@Input) - Gérer le DOM après rendu
- Libérer les ressources correctement lors de la suppression du composant
💡 Importance : Bien connaître le cycle de vie permet de créer des composants performants, prédictibles et faciles à maintenir.
Les grandes étapes du cycle de vie Angular
Création (construction de l’instance)
- Méthode :
constructor() - Rôle : Injection des dépendances, initialisations simples.
- Note : Les données d’entrée (
@Input) ne sont pas encore disponibles.
Initialisation
- Méthode clé :
ngOnInit() - Moment : Après la première initialisation des entrées.
- Utilité : Parfait pour un chargement initial (appel API, configuration interne).
Détection et gestion des changements
ngOnChanges(changes: SimpleChanges): Réagit à chaque changement d’une propriété@Input.ngDoCheck(): Permet une détection personnalisée des changements non pris en compte par Angular.
Gestion du contenu projeté
ngAfterContentInit(): Après insertion de contenu via<ng-content>.ngAfterContentChecked(): Après chaque mise à jour du contenu projeté.
Gestion de la vue
ngAfterViewInit(): Après la première initialisation complète de la vue et de ses enfants.ngAfterViewChecked(): Après chaque mise à jour/rendu de la vue.
Destruction
ngOnDestroy(): Avant destruction du composant (navigation, suppression).- Rôle : Désabonnements, arrêt de timers, nettoyage mémoire.
Tableau récap des hooks Angular
| Hook | Moment clé | Utilisation typique |
|---|---|---|
constructor | Création de l’instance | Injection de dépendances, init légères |
ngOnChanges | Changement d’entrées @Input | Adapter le comportement |
ngOnInit | Après init des entrées | Chargement initial des données |
ngDoCheck | Chaque détection de changements | Logique personnalisée |
ngAfterContentInit | Après insertion du contenu | Init après transclusion |
ngAfterContentChecked | Après chaque maj contenu | Ajustement / synchro |
ngAfterViewInit | Après init de la vue | Manipulation DOM, animations |
ngAfterViewChecked | Après chaque maj vue | Ajustements fins |
ngOnDestroy | Avant destruction | Nettoyage, désabonnement |
Vulgarisation rapide
Imagine un composant Angular comme un objet vivant :
- Naissance →
constructor - Premiers réglages →
ngOnInit - Évolution selon l’environnement →
ngOnChanges,ngDoCheck - Accueil d’éléments extérieurs →
ngAfterContentInit/ngAfterContentChecked - Gestion de son apparence →
ngAfterViewInit/ngAfterViewChecked - Mort →
ngOnDestroy(libération des ressources)
Pourquoi bien gérer le cycle de vie Angular ?
- Performance : Évite des calculs/rendus inutiles
- Fiabilité : Comportement prévisible des composants
- Maintenance : Code mieux organisé et plus clair
- Prévention des fuites mémoire grâce à
ngOnDestroy()
En résumé
- Cycle de vie Angular = suite d’événements contrôlés pour gérer création → mise à jour → destruction d’un composant
- Chaque hook a un rôle précis
- Bien les utiliser permet d’optimiser performance, maintenabilité et lisibilité du code
“Ces notes techniques sont à but informatif, non formatif, et reflètent mon expérience à la date de rédaction.”