Angular Academy · Lección

ngOnInit e inicialización

Ejecute la lógica de configuración cuando se inicie un componente.

ngOnInit e inicialización es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué son los hooks del ciclo de vida?

Los componentes de Angular tienen un ciclo de vida gestionado por el framework: creación, detección de cambios, renderizado y destrucción. Los hooks del ciclo de vida le permiten ejecutar código en momentos específicos.

Introducción a OnInit

El hook OnInit se ejecuta una vez, después de que Angular haya establecido las entradas del componente y renderizado la vista inicial. Es el lugar habitual para la lógica de inicialización.

Implementar OnInit

Implemente la interfaz OnInit y añada el método ngOnInit. Angular lo llama automáticamente.

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

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Constructor frente a ngOnInit

El constructor se ejecuta primero, antes de establecer las entradas, y solo debería encargarse de una inyección de dependencias ligera. Utilice ngOnInit para la configuración real, una vez que las entradas estén disponibles.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

Las entradas están listas en ngOnInit

Cuando se ejecuta ngOnInit, todas las propiedades @Input ya tienen sus valores iniciales enlazados desde el componente padre.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

Obtener datos en ngOnInit

Un patrón habitual consiste en cargar datos desde un servicio en ngOnInit, ya que tiene acceso a las entradas y las dependencias.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit se ejecuta una vez

A diferencia de los hooks de detección de cambios, ngOnInit se ejecuta exactamente una vez durante la vida del componente, justo después del primer ngOnChanges.

Orden con respecto a ngOnChanges

Si el componente tiene entradas, ngOnChanges se activa primero con los valores iniciales y después se ejecuta ngOnInit. Sin entradas, ngOnInit también se ejecuta.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

Inicializar formularios

Crear formularios reactivos es una tarea clásica de ngOnInit, porque puede necesitar servicios inyectados para configurar el formulario.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Mantener ligeros los constructores

Evite realizar tareas pesadas en el constructor. Se ejecuta antes de que Angular conecte las entradas, y los efectos secundarios allí hacen que los componentes sean más difíciles de probar y predecir.

Inicialización asíncrona

Puede llamar a lógica asíncrona desde ngOnInit, pero el propio método devuelve void; suscríbase o utilice patrones asíncronos en su interior.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

Comprobación rápida

Compruebe su comprensión de OnInit.

Resumen

El hook OnInit, mediante ngOnInit, se ejecuta una vez después de enlazar las entradas y es ideal para obtener datos y configurar formularios. Mantenga ligero el constructor y reserve la inicialización para ngOnInit.

Preguntas frecuentes

¿La lección «ngOnInit e inicialización» es gratis?

Sí — el texto completo de «ngOnInit e inicialización» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «ngOnInit e inicialización»?

Ejecute la lógica de configuración cuando se inicie un componente. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «ngOnInit e inicialización»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy