Comment utiliser ngAfterViewInit dans Angular ?

ngAfterViewInit est un hook de cycle de vie Angular qui est appelé une fois après que les vues du composant et de ses enfants ont été initialisées. Vous pouvez l'utiliser pour effectuer des tâches d'initialisation qui dépendent des vues du composant.

Voici un exemple de composant qui utilise ngAfterViewInit :

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  standalone: true,
  template: `
    <h1>Mon composant</h1>
    <p>{{ message }}</p>
  `,
})
export class MyComponent implements AfterViewInit {
  message = 'Salut !';

  ngAfterViewInit() {
    console.log('Les vues du composant ont été initialisées !');
  }
}

Vous pouvez utiliser ngAfterViewInit dans votre template de composant comme ceci :

<app-my-component></app-my-component>

Lorsque le composant sera initialisé, la méthode ngAfterViewInit sera appelée une fois et le message "Les vues du composant ont été initialisées !" sera affiché dans la console.

Exemple utile avec ElementRef

Voici un exemple d'utilisation de ngAfterViewInit avec ElementRef dans un composant Angular :

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-my-component',
  standalone: true,
  template: `
    <h1>Mon composant</h1>
    <p #message>Salut !</p>
  `,
})
export class MyComponent implements AfterViewInit {
  @ViewChild('message') messageEl!: ElementRef;

  ngAfterViewInit() {
    console.log(`Le texte du message est "${this.messageEl.nativeElement.textContent}"`);
  }
}

Dans cet exemple, nous avons utilisé la décorateur @ViewChild pour récupérer une référence à l'élément <p> avec l'attribut #message dans le template du composant. Nous avons ensuite utilisé l'objet ElementRef dans la méthode ngAfterViewInit pour accéder au texte du message.

Lorsque le composant sera initialisé, la méthode ngAfterViewInit sera appelée une fois et le texte du message sera affiché dans la console.