Cycke de vie un composant Angular

🔁 Vue d’ensemble du cycle de vie

Voici l’ordre principal des hooks Angular :

1. constructor
2. ngOnChanges
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ngAfterContentChecked
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

---

🧩 Détail des hooks

1. constructor()

• Appelé lors de la création de l’objet
• Sert uniquement à injecter les dépendances
• ⚠️ Évite d’y mettre de la logique métier

---

2. ngOnChanges(changes: SimpleChanges)

• Appelé à chaque changement des @Input()
• Très utile pour réagir aux données venant du parent

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

---

3. ngOnInit()

• Appelé une seule fois après l’initialisation
• Idéal pour :
  • appels API
  • initialisation des données

ngOnInit() {
  this.loadData();
}

---

4. ngDoCheck()

• Appelé à chaque cycle de détection de changement
• Permet un contrôle manuel (rarement utilisé)

---

5. ngAfterContentInit()

• Appelé après projection du contenu (<ng-content>)
• Une seule fois

---

6. ngAfterContentChecked()

• Appelé après chaque vérification du contenu projeté

---

7. ngAfterViewInit()

• Appelé après initialisation de la vue (template + enfants)
• Idéal pour manipuler le DOM ou @ViewChild

ngAfterViewInit() {
  console.log(this.myElement);
}

---

8. ngAfterViewChecked()

• Appelé après chaque vérification de la vue

---

9. ngOnDestroy()

• Appelé juste avant la destruction du composant
• Très important pour :
  • unsubscribe des Observables
  • nettoyer les timers

ngOnDestroy() {
  this.subscription.unsubscribe();
}

---

🧠 Résumé simple

👉 Création → Initialisation → Vérifications → Destruction

constructor → ngOnChanges → ngOnInit
→ ngDoCheck → ngAfterContentInit → ngAfterContentChecked
→ ngAfterViewInit → ngAfterViewChecked
→ ngOnDestroy

---

💡 Bonnes pratiques

• Utilise ngOnInit pour charger les données
• Nettoie toujours dans ngOnDestroy
• Évite ngDoCheck sauf cas avancé
• N’utilise pas constructor pour logique métier