Cette méthode s'exécute lorsque Angular a totalement fini de dessiner l'écran (le HTML). C'est le seul endroit où il est garanti et sécurisé de manipuler le HTML directement (changer des couleurs, mesurer une taille, lancer une animation 3D).
Si vous essayez de modifier un <div> dans un ngOnInit(), Angular vous renverra une erreur car à ce moment-là, le HTML n'existe pas encore. Le composant est prêt en coulisses, mais pas son affichage visuel !
Ici, tout le HTML est en place sur la page ! Vous pouvez utiliser @ViewChild pour attraper n'importe quel élément de votre page et modifier ses styles, sa taille ou lui ajouter des effets spéciaux sans risquer de plantage.
Lors du chargement de cette page, le carré ci-dessous était gris. Une fraction de seconde plus tard, ngAfterViewInit() s'est déclenché pour le peindre en vert et l'agrandir avec une animation CSS !
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-demo-after-view',
template: `
<!-- On place une "balise" #myBox sur cet élément -->
<div #myBox class="box">En attente...</div>
`
})
export class DemoComponent implements AfterViewInit {
// On demande à Angular de nous trouver la div "#myBox"
@ViewChild('myBox') myBox!: ElementRef;
// Cette fonction s'exécute quand tout le HTML est affiché
ngAfterViewInit() {
// 1. On attrape le vrai élément HTML
const boxElement = this.myBox.nativeElement;
// 2. On peut maintenant modifier le DOM en toute sécurité !
setTimeout(() => {
boxElement.style.backgroundColor = '#198754'; // Passe au vert
boxElement.style.transform = 'scale(1.2)'; // On l'agrandit
boxElement.style.transition = 'all 0.5s ease-out'; // Animation fluide
boxElement.innerHTML = 'Action effectuée !';
}, 500); // Petit délai pour qu'on ait le temps de voir l'animation
}
}