Método ngAfterViewInit de Angular

Presentaremos el método ngAfterViewInit() y lo usaremos en aplicaciones Angular.

el método ngAfterViewInit() en Angular

El ngAfterViewInit() en Angular es un método de AfterViewInit, y Angular inicializa completamente un gancho de bucle de vida llamado después de la vista del componente.

Podemos usar ngAfterViewInit() para manejar y realizar cualquier tarea de inicialización requerida en el componente, o queremos hacerlo después de que la vista del componente se haya inicializado por completo.

Podemos acceder a las propiedades anotadas usando ngAfterViewInit() con dos decoradores, los decoradores @ViewChild() y @ViewChildren().

Veremos un ejemplo para entender cómo funciona ngAfterViewInit() y cómo podemos usarlo en nuestras aplicaciones Angular.

Vamos a crear una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

En nuestro app.component.ts, crearemos un método ngAfterViewInit() para console.log nuestro mensaje. Así que nuestro código se verá como a continuación.

# 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");
  }
}

Producción:

De esta manera, podemos usar ngAfterViewInit() para inicializar cualquier cosa importante después de que Angular haya inicializado la vista del componente.