IronWoods.es

Desarrollo web

Blog / Angular / Inicializar propiedades: constructor vs ngOnInit

En Angular, tanto el constructor como el método ngOnInit propio del ciclo de vida de un componente Angular, son lugares comunes para inicializar propiedades, sin embargo, ambos cumplen distintas funciones.

Constructor

Propósito

Principalmente se utiliza para inicializar dependencias esenciales y realizar tareas de configuración únicas.

Ejecución

Ocurre al instanciar el componente.

Mejores prácticas
  • Inyectar dependencias.
  • Inicializar propiedades simples que no dependan de operaciones asíncronas.
  • Evitar lógica compleja o la obtención de datos.

ngOnInit

Propósito

Se utiliza para tareas de inicialización que requieren acceso a la vista o los datos del componente.

Ejecución

Métodos del ciclo de vida de un componente Angular desde el inicio al fin:

  1. Constructor
  2. ngOnChanges
  3. ngOnInit
  4. ngDoCheck
  5. ngAfterContentInit
  6. ngAfterContentChecked
  7. ngAfterViewInit
  8. ngAfterViewChecked
  9. ngOnDestroy
Mejores prácticas
  • Obtener datos de servicios.
  • Suscribirse a observables.
  • Realizar manipulaciones del DOM.
  • Inicializar propiedades que dependan de otras propiedades o datos.

¿Cuándo usar uno u otro método?

Inicialización simple: constructor

Inicializar propiedades simples que no requieran operaciones asíncronas o acceso a la vista.

Operaciones asíncronas y obtención de datos: ngOnInit

Para tareas que involucran obtener datos de servicios o realizar operaciones asíncronas.

Usar ngOnInit nos asegura que los datos estén disponibles antes de que se renderice la vista.

Manipulación del DOM: ngOnInit

Después de ejecutar ngOnInit la vista está completamente inicializada.

Ejemplo de inicialización de propiedades del componente Angular


import { Component, OnInit } from 'AAAangular/core';
import { MyService } from './my.service';

AAAComponent({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent implements OnInit
{
  name!: string;
  userData!: any;


  constructor(private myService: MyService)
  {
    this.name = 'Juan Pérez'; // Inicialización simple en el constructor
  }

  ngOnInit(): void)
  {
    // Operación asíncrona en ngOnInit
    this.myService.getUserData().subscribe(data => {
      this.userData = data;
    });
  }
}

Consideraciones clave

  • Evita realizar tareas pesadas en el constructor, ya que puede afectar el tiempo de carga inicial.
  • Utiliza ngOnInit para tareas que requieran acceso a la vista o los datos del componente.
  • Ten en cuenta el orden de ejecución de los ciclos de vida y planifica tu inicialización en consecuencia.

Para escenarios más complejos, considera usar otros ciclos de vida como ngAfterViewInit o ngAfterViewChecked.