Ciclo de Vida de Componentes en Angular: Eventos Clave

Curso de Angular: Creación de Aplicaciones Web

Contenido del curso

Introducción a Angular y Fundamentos

Estructuras de control en Angular

Alistando tu aplicación para producción

Componentes Reutilizables y Comunicación

Ciclo de vida de los componentes

Mejorando la interfaz del producto

Integración y Datos

Enrutamiento y Navegación

Perfeccionando tu e-commerce

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:35

Ciclo de Vida de Componentes en Angular: Eventos Clave

Curso de Angular: Creación de Aplicaciones Web

Clase 37 de 71

Clase 37 / 71

Comentarios (14)14 comentarios

Eduardo Razo Cobián

Hace 3 años

Manuel Alberto Goicochea Medina

Hace 3 años

Emmanuel Hernández Valero

Hace 3 años

Brandon Lee Aguero Fernandez

Hace 3 años

Platzi

Hace 3 años

César Augusto Cortés Labrada

Hace 2 años

César Augusto Cortés Labrada

Hace 2 años

César Augusto Cortés Labrada

Julian Franco

Emmanuel Rodríguez

Reinaldo Mendoza

ANDRES ALFONSO MIRA MEJIA

Hace 3 años

Franco Torres

Hace 4 meses

Dario Bublitz

Hace 10 meses•editado

Dario Bublitz

Hace 10 meses•editado

Dario Bublitz

Hace 10 meses•editado

Dario Bublitz

Hace 10 meses•editado

Dario Bublitz

Hace 10 meses•editado

Max Andy Diaz Neyra

Hace 2 años

Jhonattan Halcon Casallas Felipe

Hace 2 años

Recursos

¿Qué es ngOnInit y por qué es tan importante?

El evento ngOnInit es uno de los ciclos de vida más esenciales en el desarrollo de aplicaciones con Angular. A menudo se confunde con el constructor, pero tiene un propósito diferente y es crucial comprender sus capacidades.

Uso único: Mientras que un constructor puede ejecutarse varias veces antes y después del renderizado, ngOnInit se ejecuta solo una vez, inmediatamente después del renderizado inicial del componente. Esto hace que sea el lugar ideal para tareas de inicialización del componente.
Tareas asíncronas: Este evento es perfecto para manejar operaciones asíncronas como llamadas a una API o suscripciones a observables, ya que garantiza que el componente ya ha sido completamente renderizado.

Para ilustrar su uso, si se desea obtener una lista de productos desde una fuente de datos, ngOnInit es el momento adecuado para hacer un fetch y manipular la respuesta para actualizar el componente.

¿Cómo funciona ngAfterViewInit?

ngAfterViewInit es otro ciclo de vida que se desencadena después de ngOnInit y tiene una función específica.

Renderizado de componentes hijos: Este evento es clave para determinar cuándo los componentes hijos de un componente principal han sido completamente renderizados. Es útil si necesitas interactuar con los elementos del DOM de esos componentes hijos.

Al declarar un componente dentro de otro, ngAfterViewInit te informará cuando dichos componentes hijos estén listos. Esto es esencial en aplicaciones que usan arquitecturas complejas o jerárquicas.

¿Cuándo se utiliza ngOnDestroy?

Por último, ngOnDestroy es el evento que se ejecuta cuando un componente está a punto de ser destruido.

Limpieza y desuscripción: Se utiliza normalmente para liberar recursos, cancelar suscripciones y evitar fugas de memoria cuando el componente ya no se requiere.

Para destruir un componente, se puede usar una directiva como ngIf, que al no cumplirse una condición, removerá el componente y, en consecuencia, disparará ngOnDestroy.

Por ejemplo, si tienes un componente cuya visibilidad depende de un valor como duration, al volverse negativo, ngOnDestroy se ejecutará y eliminará el componente. Si posteriormente el valor cambia a un estado positivo, todo el ciclo de vida del componente se reinicia, comenzando desde el constructor.

Estos ciclos de vida son fundamentales para el rendimiento y el manejo eficiente de los recursos en aplicaciones Angular. Conocerlos te permitirá escribir código más robusto y optimizado. ¡Sigue explorando las posibilidades de Angular y continúa aprendiendo!

Por alguna razón, me marcaba este error al escribir la directiva de *ngIf

If the 'ngIf' is an Angular control flow directive, please make sure that either the 'NgIf'

Basta con agregar un import de CommonModule en archivos de about.component.ts y counter.component.ts, asi:

import { CommonModule } from '@angular/common';

y agregarlo en los imports

@Component({
  ...
  imports: [CommonModule],
  ...
})

gracias e.e

podrías haber usado

@if(duration() > 0 ){
  <p>
    <app-counter></app-counter>
  </p>
}

En el Curso de Angular: Componentes y Servicios en esta clase a partir del minuto 4:09. El profesor explica que ngOnInit es before render pero en la clase actual se menciona que es after render. ¿Cuál sería la explicación correcta?

La explicación correcta es que ngOnInit se ejecuta antes del render del componente.

Para saber cuando se activa el onInit, en el counter tomé un elemento como referencia y en .ts cree una propiedad que guarda dicho elemento. Luego extraje el contenido de esa etiqueta en el onInit y me dio como resultado undefined; quiere decir que no encontró al elemento por tanto su contenido no existe y da undefined, oséa que, onInit se activa antes del render. En cambio, cuando hago lo mismo en el afterInit si encuentra el contenido de la etiqueta , oséa, después del render.

counter.html
//Esto es una pieza solamente del .ts
<div>
  <p>Counter</p>
  <span #text_test>Soy ref de prueba</span> <!-- Referencia con #text_test -->
</div>

counter.ts
@ViewChild('text_test') textTest!: ElementRef<HTMLElement>
  ngOnInit(): void {
    console.log('Init');
    console.log("ELEMENTO", this.textTest.nativeElement.textContent); //Da error undefined
    console.log('-'.repeat(10));
  }

  ngAfterViewInit(): void {
    console.log('Afterview');
    console.log("After", this.textTest.nativeElement.textContent);//Obtenemos el contenido
    console.log('-'.repeat(10));
  }
```Por último recordar comentar la línea del onInit donde se espera obtener el contenido de la etiqueta p para poder probar el afterInit

este comentario: //Esto es una pieza solamente del .ts va después del html del bloque

corrección, no usé una etiqueta sino una etiqueta como referencia

Pero osea que si tengo un formulario, y suso el

this.formulario.valueChanges.subscribe()

En donde se deberia poner ?

Hola 👋 . Para suscribirte a los cambios en los valores de un formulario, el mejor lugar para hacerlo es dentro del método ngOnInit(). Este es el momento en el ciclo de vida del componente donde se ha inicializado, pero aún no se ha mostrado la vista, lo que te da un lugar ideal para configurar tus observables.

export class MiFormularioComponent implements OnInit {
  formulario: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.formulario = this.fb.group({
      // Definiciones de tus controles de formulario aquí
      nombre: [''],
      email: ['']
    });

    this.formulario.valueChanges.subscribe(values => {
      console.log(values);
      // Lógica adicional aquí
    });
  }
}

Al suscribirte en ngOnInit(), aseguras que el formulario esté completamente inicializado y listo para ser utilizado. . Además, es crucial desuscribirse de cualquier observador cuando el componente se destruya para evitar fugas de memoria. Esto lo puedes hacer implementando el ciclo de vida ngOnDestroy() junto con una propiedad para almacenar la suscripción:

export class MiFormularioComponent implements OnInit, OnDestroy {
  // Otro código

  ngOnDestroy() {
    if (this.formSubscription) {
      this.formSubscription.unsubscribe();
    }
  }
}

Implementar ngOnDestroy() y cancelar la suscripción de esta manera asegura que el componente limpie adecuadamente los recursos que ya no necesita, previniendo problemas de rendimiento.

Esto se vuelve mas divertido cuando el proyecto en el que trabajas tiene librerías externas y tienes que interactuar con ellas

✅

Agreguen una opción para cerrar el chat pls

📍El ciclo de vida se reinicia al recrear el componente

Me llevo que si un componente se destruye y vuelve a crearse (por ejemplo con ngIf), todo su ciclo de vida comienza nuevamente desde el constructor.

📍ngOnDestroy es clave para limpiar recursos

Me llevo que ngOnDestroy es fundamental para evitar fugas de memoria, cancelando suscripciones y liberando recursos antes de que el componente desaparezca.

📍ngAfterViewInit indica que los hijos ya existen

Me llevo que ngAfterViewInit se dispara cuando los componentes hijos ya están renderizados, lo cual es clave si necesito interactuar con el DOM o con referencias a esos componentes.

📍ngOnInit es ideal para lógica asíncrona

Me llevo que ngOnInit es el lugar recomendado para llamadas a APIs y suscripciones, porque se ejecuta una sola vez y cuando el componente ya está listo para mostrarse.

📍ngOnInit no es lo mismo que el constructor

Me llevo que ngOnInit y el constructor cumplen roles distintos: el constructor inicializa, pero ngOnInit es el momento correcto para ejecutar lógica real del componente.

Codigo de la clase:

<p>
  <input type="number" [value]="duration()" (change)="changeDuration($event)">
</p>
<p>
  <input type="text" [value]="message()" (change)="changeMesage($event)">
</p>
<p>
  @if(duration()> 0){
    <app-counter [duration]="duration()" [message]="message()"></app-counter>
  }
</p>


``````js
import { Component, Input, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  imports: [],
  templateUrl: './counter.component.html',
  styleUrl: './counter.component.css',
})
export class CounterComponent {
  @Input({ required: true }) duration = 0;
  @Input({ required: true }) message = '';

  constructor() {
    // NO ASYNC
    // before render
    console.log('nuestro constructor');
    console.log('-'.repeat(10));
  }

  ngOnChanges(changes: SimpleChanges) {
    // before and during render
    console.log('ngOnChanges');
    console.log('-'.repeat(10));
    console.log(changes);
  }

  ngOnInit() {
    // una vez
    // async, then, subs
    console.log('ngOnInit');
    console.log('-'.repeat(10));
    console.log('duration =>', this.duration);
    console.log('message =>', this.message);
    console.log('-'.repeat(10));
  }

  ngAfterViewInit() {
    // despues de pintar el componente padre e hijos
    console.log('ngAfterViewInit');
    console.log('-'.repeat(10));
  }

  ngOnDestroy() {
    console.log('ngOnDestroy');
    console.log('-'.repeat(10));
  }
}

Quitandole la etiqueta en el componente, no me presenta problema al renderizar el HTML, al dejarlo, me presenta problemas con la Hidratación en el DOM. :

Introducción a Angular y Fundamentos

Desarrollo de Aplicaciones Modernas con Angular

Creando tu primer proyecto en Angular

Creación de componentes y rutas en Angular para gestión de tareas

String Interpolation en Angular: Transmisión de Datos a Templates

Modificación de Propiedades HTML con Angular: Property Binding

Eventos en Angular: click, doble click y cambio de input

Eventos de Teclado en JavaScript: Uso de KeyDown y Change

Reactividad Granular con Signals en Angular

Reactividad en HTML: Implementación de Signals en JavaScript

Estructuras de control en Angular

Estructuras de Control y Renderizado Dinámico en Angular

Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación

Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing

Actualización de tareas con Angular y programación inmutable

Uso de ngIf y ngFor para control de flujos en Angular

ngIf vs ngSwitch en Angular

Manejo Avanzado de Formularios Reactivos en Angular

Validaciones de Inputs en Formularios Reactivos con Angular

Alistando tu aplicación para producción

Validación de formularios y estilos dinámicos en Angular

Clases dinámicas en Angular sin mover el DOM

Modo edición con doble clic en Angular

Estados Computados en Programación Reactiva con Signals

Persistencia de Tareas con LocalStorage en Angular

ng build para producción en Angular

Desplegar una app Angular en Firebase Hosting

Nueva sintaxis @if y @else en Angular

Sintaxis y rendimiento de for y switch en JavaScript moderno

Migración Automática a Nueva Sintaxis de Angular

Componentes Reutilizables y Comunicación

Creación de Tienda en Línea con Angular y Tailwind CSS

Creación y Organización de Componentes en Angular

Componentes Reutilizables en Angular: Creación y Maquetado de Productos

Uso de Angular DevTools para Debugging en Angular

Inputs en Angular: Comunicación de Datos entre Componentes

Outputs en Angular: Comunicación del Hijo al Padre

Maquetación de Galería de Productos con Tailwind CSS

Ciclo de vida de los componentes

Ciclo de Vida de Componentes en Angular

Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación

Ciclo de Vida de Componentes en Angular: Eventos Clave

Detección de Cambios en Inputs con ngOnChange en Angular

Prevención de fugas de memoria con ngOnDestroy en Angular

Creación de un Reproductor de Audio con WaveSurfer.js en Angular

Mejoras de la página About en e-commerce: audio y contador dinámico

Mejorando la interfaz del producto

Componentización y Manejo de Datos en Angular

Creación de Headers en Páginas Web con Angular

Implementación de Interfaz Gráfica para Carrito de Compras Interactivo

Implementación de Reactividad en Carrito de Compras con Angular

Gestión de Carrito de Compras en Angular con ngOnChanges

Gestión de Estado en Angular: Solución al InputDrilling

Gestión de Estado Global en Angular con Servicios y Señales

Inyección de Dependencias en Angular: Conceptos y Prácticas

Integración y Datos

Conexión de Angular a REST API usando Fake Store API de Platzi

Creación de Alias para Imports Cortos en Proyectos JavaScript

Transformación de Datos con Pipes en Angular

Creación y uso de pipes personalizados en Angular

Manipulación de Fechas en Angular con Date Functions

Manipulación del DOM con Directivas en Angular

Deployment de Angular en Vercel

Enrutamiento y Navegación

Creación de Página 404 en Angular: Manejo de Rutas No Encontradas

Implementación de Router Link en Angular para SPA eficiente

Implementación de Layouts Compartidos en Angular para Vistas Anidadas

Uso de RouterLinkActive en Angular para Navegación Activa

Routing en Angular: Creación de Páginas de Detalle de Producto

Consulta dinámica de detalles de producto con Angular y REST API

Galería de Productos Dinámica con Angular y TypeScript

Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa

Perfeccionando tu e-commerce

Filtrado de Productos por Categoría en E-commerce

Filtros de Productos con Query Params en Angular

Optimización de Aplicaciones con Lazy Loading y Code Splitting

Optimización de JavaScript en Angular con Lazy Loading

Optimización de Carga de Chunks con Preloading en Angular

Migración de Angular a Nueva Sintaxis con ng generate

Despliegue de Aplicaciones con Verzal en Entornos Productivos