Cómo usar el método de ngOnInit de Angular

Angular, como otros frameworks Javascript tiene una forma de poder ejecutar código cuando el componente carga por primera vez, en Angular es un método que se llama ngOnInit.

Es importante saber que cuando el componente se destruye en una vista y se vuelve a cargar también se vuelve a lanzar el ngOnInit.

Para que un componente de Angular pueda ejecutar el ngOnInit tienes que importar onInit de Angular:

import { Component, OnInit } from "@angular/core";

Además tienes que hacer que el componente implemente el onInit:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.css"],
})
export class HomeComponent implements OnInit {
  constructor() {}
}

Por último tienes que meter el método de ngOnInit dentro del componente:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.css"],
})
export class HomeComponent implements OnInit {
  constructor() {}
  ngOnInit() {
    console.log("En este instante el componente ha cargado");
  }
}

En este ejemplo simplemente se lanza un console.log pero en ese punto puedes aprovechar para incializar variables, llamar a APIs, leer cookies, etc.

Para llamar a APIs lo recomendable es usar los Servicios en Angular que están diseñador para ese fin.

Diferencias entre ngOnInit() y el constructor() en Angular

Como otros lenguajes, typescript también tiene un constructor de clase, en este caso el constructor se ejecuta antes que el ngOnInit().

Normalmente se usa el constructor para inicializar variables, y el ngOnInit para inicializar o ejecutar tareras que tienen que ver con Angular. Todo esto lo podemos poner directamente en el constructor y funcionaría de la misma manera, pero no está de más tener más separado el código para que sea más mantenible.

Es decir, mi recomendación es que en el constructor solo incialices variables y el ngOnInit el resto de cosas: llamadas a backend, preparación de los datos, filtrado, etc.

Visto esto de Angular vamos con lo importante de este artículo: cómo se programa con Typescript.