Angular

Appearance

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 comment utiliser ngAfterViewInit dans votre composant Angular :

  1. Importez l'interface AfterViewInit dans votre composant :
ts
import { Component, AfterViewInit } from '@angular/core';
import { Component, AfterViewInit } from '@angular/core';
  1. Faites en sorte que votre composant implémente l'interface AfterViewInit :
ts
export class MyComponent implements AfterViewInit {
  // ...
}
export class MyComponent implements AfterViewInit {
  // ...
}
  1. Implémentez la méthode ngAfterViewInit dans votre composant :
ts
ngAfterViewInit() {
  // Cette méthode sera appelée une fois après que les vues du composant et de ses enfants
  // ont été initialisées. Vous pouvez y mettre votre code d'initialisation ici.
}
ngAfterViewInit() {
  // Cette méthode sera appelée une fois après que les vues du composant et de ses enfants
  // ont été initialisées. Vous pouvez y mettre votre code d'initialisation ici.
}

Voici un exemple de composant qui utilise ngAfterViewInit :

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

@Component({
  selector: 'app-my-component',
  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 !');
  }
}
import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  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 :

html
<app-my-component></app-my-component>
<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 :

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

@Component({
  selector: 'app-my-component',
  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}"`);
  }
}
import { Component, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  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.