3 hooks en Angular.js más importantes

Los hooks en Angular.js se refieren a una característica específica que se agregó en la versión 1.5 del framework. Los hooks permiten que un componente o directiva de Angular.js especifique ciertos puntos en el ciclo de vida de la aplicación en los que se deben ejecutar determinadas funciones.

Por ejemplo, un hook puede ser utilizado para ejecutar una función cuando un componente se carga por primera vez, cuando se actualiza el valor de una propiedad, o cuando un componente se elimina de la página. Los hooks permiten a los desarrolladores de Angular.js tener un mayor control sobre el comportamiento de sus aplicaciones y garantizar que se ejecuten ciertas funciones en momentos específicos del ciclo de vida de la aplicación.

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