OnInit vs constructor

En Angular, el constructor() y el método ngOnInit() se utilizan para inicializar los componentes. Sin embargo, hay una diferencia importante entre estos dos métodos que es importante conocer para escribir un código Angular eficiente.

El constructor

El constructor es un método que se ejecuta automáticamente cuando se crea una instancia de un componente. Se utiliza para inicializar las propiedades de este, definir los parámetros de entrada y ejecutar la configuración inicial. En otras palabras, el constructor se encarga de generar el objeto y configurarlo para que se pueda utilizar.

import { Component } from "@angular/core";
 
@Component({
  selector: "app-my-component",
  template: "My Component",
})
export class MyComponent {
  constructor() {
    // Inicialización de propiedades
  }
}

OnInit

Por otro lado, ngOnInit() es un método del ciclo de vida de Angular que se ejecuta después de la inicialización del componente y antes de ser renderizado. Se utiliza para ejecutar el código de inicialización después de que se hayan definido todas las propiedades del componente.

Esto implica que ngOnInit() es el lugar adecuado para inicializar las propiedades que dependen de otras propiedades del componente o de servicios inyectados. En otras palabras, ngOnInit() se encarga de inicializar el objeto y configurarlo para que se pueda utilizar.

import { Component, OnInit } from "@angular/core";
 
@Component({
  selector: "app-my-component",
  template: "My Component",
})
export class MyComponent implements OnInit {
  ngOnInit() {
    // Código de inicialización
  }
}

El constructor vs OnInit

El constructor se utiliza para inicializar una clase, por lo que este no guarda relación alguna con los elementos HTML del DOM. En cambio, ngOnInit() se ejecuta solo una vez después de que se ha generado el objeto, por lo que resulta buena idea, y buena práctica, dejar este último para manejar la lógica de negocio y delegar las tareas de dependencias o alguna configuración básica al constructor.