3 Angular.js: Hooks más importantes

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