Méthode Angular ngAfterViewInit

Nous allons introduire la méthode ngAfterViewInit() et l’utiliser dans les applications Angular.

la méthode ngAfterViewInit() dans Angular

Le ngAfterViewInit() dans Angular est une méthode de AfterViewInit, et Angular initialise complètement un crochet de cycle de vie appelé après la vue du composant.

Nous pouvons utiliser ngAfterViewInit() pour gérer et effectuer toutes les tâches d’initialisation requises dans le composant, ou nous voulons le faire après que la vue du composant a été entièrement initialisée.

Nous pouvons accéder aux propriétés annotées à l’aide de ngAfterViewInit() avec deux décorateurs, les décorateurs @ViewChild() et @ViewChildren().

Nous allons passer par un exemple pour comprendre comment fonctionne ngAfterViewInit() et comment nous pouvons l’utiliser dans nos applications Angular.

Créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Dans notre app.component.ts, nous allons créer une méthode ngAfterViewInit() pour console.log notre message. Donc, notre code ressemblera à ci-dessous.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  ngAfterViewInit() {
    console.log("Sent from Ng After View Init");
  }
}

Production:

De cette façon, nous pouvons utiliser ngAfterViewInit() pour initialiser toutes les choses importantes après que la vue du composant a été initialisée par Angular.