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.
¿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;
});
}
}