Categoría: angular

Vamos a empezar ha hablar de los tres Hooks más importantes de angular.js OnInit, DoCheck, OnDestroy.

OnInit

Es el ciclo de vida que se llama después de que Angular haya inicializado todas las propiedades vinculadas a datos de una directiva.

interface OnInit {
  ngOnInit(): void
}

DoCheck

Es el ciclo de vida que invoca una función de detección de cambios personalizada para una directiva, además de la verificación realizada por el detector de cambios predeterminado.

interface DoCheck {
  ngDoCheck(): void
}

OnDestroy

Es el ciclo de vida que se llama cuando se destruye una directiva, tubería o servicio.

interface OnDestroy {
  ngOnDestroy(): void
}

Ejemplo más práctico

Para comprender un poco más la funcionalidad de los hooks de angular.js, que mejor que un buen ejemplo.

import { Component, OnInit, DoCheck, OnDestroy } from '@angular/core';

@Component({
    selector: 'componente',
    templateUrl: './componente.component.html'
})
export class ComponenteComponent implements OnInit, DoCheck, OnDestroy {

    ngOnInit(){
        console.log("OnInit ejecutado");
    }

    ngDoCheck(){
        console.log("DoCheck ejecutado");
    }

    ngOnDestroy(){
        console.log("OnDestroy ejecutado");
    }
    
}

Para generar componentes des de consola de una forma muy fácil es coger el terminal de nuestro sistema operativo y dentro de nuestro directorio de app, poner este comando.

Solo tenéis que cambiar nombre_componente por el nombre que queréis para crear nuestro componente automaticamente.

ng generate component nombre_componente