Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Clase 6 de 20 • Curso de Angular: Componentes y Servicios

Resumen

Un componente pasa por varias etapas en su ciclo de vida. A través de hooks, puedes realizar una determinada acción cuando el componente es inicializado, cuando se dispara un evento, cuando se detecta un cambio, cuando el componente es destruido, etc.

A continuación, se detalla la secuencia de eventos y el orden de los mismos:

Hooks más utilizados

Constructor

Como en toda clase en la programación orientada a objetos, el constructor es quien crea la instancia del objeto y sus dependencias.

Solo se ejecuta una vez antes del render del componente.
No tiene que utilizarse para procesos asincrónicos.

ngOnChanges

El hook ngOnChanges() se dispara cada vez que se produce un cambio de estado en el componente. Cuando una variable cambia de valor, por ejemplo o ante el cambio de valor de un Input.

Se ejecuta N cantidad de veces antes y durante el render del componente.
Puede emplearse para procesos asincrónicos.

ngOnInit

Es el hook más usado, ngOnInit() es ideal para cualquier solicitud de datos asincrónicos a una API para preparar el componente antes de renderizarlo.

Únicamente se ejecuta una vez, antes del render del componente.
Puede usarse para procesos asincrónicos.

ngAfterViewInit

Este hook únicamente se ejecuta una vez cuando el render del componente haya finalizado. Puede serte útil para realizar acciones programáticas que requieran que todo el HTML del componente ya este preparado.

Únicamente se ejecuta una vez después del render del componente.

ngOnDestroy

Finalmente, ngOnDestroy() se ejecutará cuando el componente es destruido, o sea, cuando ya no existe en la interfaz del navegador. Suele utilizarse para liberar espacios de memoria que el componente requiera.

Usando hook

Los hooks de ciclo de vida de Angular, son interfaces que tienen que importarse desde @angular/core para implementarlos en la clase y así detectar los cambios en cada evento.

import { Component, OnInit, AfterContentInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-test-name',
  templateUrl: './test-name.component.html',
  styleUrls: ['./test-name.component.less']
})
export class TestNameComponent implements OnInit, AfterContentInit, OnDestroy {

  constructor() {
    console.log('1. Primero sucederá esto');
  }

  ngOnInit(): void {
    console.log('2. Luego esto');
  }
  
  ngAfterViewInit(): void {
    console.log('3. Seguido de esto');
  }
  
  ngOnDestroy(): void {
    console.log('4. Finalmente esto (cuando el componente sea destruido)');
  }
  
}

Cada hook tiene sus características y utilidades recomendadas dependiendo lo que necesitas. Es importante seguir estas recomendaciones para buscar optimizar el rendimiento de tu aplicación.

Contribución creada con los aportes de Kevin Fiorentino.

Edinson Colonia Paez

student•

Ciclo :

Constructor: cuando se corre una instancia
ngOnChanges : corre antes y durante en el render, siemrpe que detecte cambios en el Input, está para eso, para detectar los cambios.
ngOnInit: corre antes pero tiene la condicione que solo correo una vez. Ahi se corren eventos asincronos.
ngAfcterViewInit: corre cuando los hijos de ese componentes se han renderizado.
NgOnDestroy: Corre cuando se elimina el componente.

Richard Fernando Jiménez

student•

Buen resumen.

Marisol Cervantes

student•

Resumen - Detectar cambios en el ciclo de vida de un componente:

Constructor: Angular lo ejecuta cada vez que se crea una instancia de un componente. No hacer llamadas asíncronas. Lo que ejecute, se debe completar de inmediato
ngOnChange: El evento corre antes del render y durante, si detecta cambios en los inputs. Corre múltiples veces.
ngOnInit: Corre antes del render, pero solo una vez, cuando el componente está inicializado. Acá se hacen las llamadas asíncronas, como fetch, llamadas a API, promesas.
ngAfterViewInit: Corre cuando los hijos de un componente ya se han inicializado, después del render. Acá se agrega el código que modifica los componentes hijos de manera programática, por fuera del template.
ngOnDestroy: Corre cuando un componente se elimina. Por ejemplo a causa de un if.

Se debe importar las interfaz del evento e implementarla en la clase del componente.

Héctor Gerardo Reyes Bautista

student•

  constructor() {
    // before render
    // NO async -- once time
    console.log('constructor', 'imgValue =>', this.img);
  }

  ngOnChanges() {
    // before - during render
    // changes inputs -- multiples times
    console.log('ngOnChanges', 'imgValue =>', this.img);
  }

  ngOnInit(): void {
    // before render
    // async - fetch -- once time
    console.log('ngOnInit', 'imgValue =>', this.img);
  }

  ngAfterViewInit() {
    // after render
    // handler children -- once time
    console.log('ngAfterViewInit');
  }

  ngOnDestroy() {
    // delete -- once time
    console.log('ngOnDestroy');
  }

Matias Acosta

student•

Gracias! xd

Mateo Alberto Ossa Barrios

student•

gracias x2 esto me ahorra mucho tiempo <3

Jimmy Buriticá Londoño

student•

#Ciclo de Vida Componente Angular

Daniel Eduardo Sanchez Yañez

student•

Algo que quizas pase por obviedad pero lo comento aca por si existio la duda!

-En Angular v15 no es necesario importar ninguna directiva como oninit, onchange, etc. Ya estas vienen integradas en los componentes que creamos, y tan solo usando el prefijo ng(directiva) es mas que suficiente!

Cecilia Riveros

student•

info del clclo de vida de un componente. https://medium.com/angular-chile/angular-componentes-y-sus-ciclos-de-vida-aa639e13a688

Gisela Angela Cristaldo

student•

Me encanto el aporte!

Andrés Suarez

student•

Para ti amiwis que tienes problemas con la implementación del metodo ngOnChanges() https://angular.io/api/core/OnChanges :D

Tanelo Mondaca Silva

student•

Importante destacar que la 'destruccion' en angular es efectivamente eliminar el componente, no dejar de mostrarlo solamente. Si destruyen un componente y luego inspeccionan la pagina verán que el elemento ya no existe.

Yokasta Leis

student•

Estoy repasando de nuevo las clases y escribiendo código :D por lo general suelo ver primero las clases y luego escribir.

  /*Ciclos de vida de componentes*/
  constructor() { 
    //Corre antes del render - NO correr peticiones async - corre una sola vez
    console.log('Constructor', 'ImgValue =>', this.img);
  }

  ngOnChanges(changes: SimpleChanges): void {
    //Corre antes del render - evalua cambios - corre muchas veces
    console.log('OnChanges', 'ImgValue =>', this.img);
  }

  ngOnInit(): void {
    //Corre antes del render - SI podemos correr peticiones async - fetch - corre una sola vez
    console.log('ngOnInit', 'ImgValue =>', this.img);
  }

  ngAfterViewInit(): void {
    //Corre despues del render - aca se manipulan los componentes hijos - relacionado con directivas
    console.log('ngAfterViewInit');
  }

  ngOnDestroy(): void {
    //Corre solo cuando se elimina un componente
    console.log('ngOnDestroy');
  }

  /*FIN Ciclos de vida de componentes*/

Isaías Salvador Gaona Bracamontes

student•

con el metodo ngOnInit() o en el constructor tambien sería correcto como parte del ejemplo inicializar la variable imgDefault dentro de cualquiera estas funciones o es una mala práctica?

Tanelo Mondaca Silva

student•

Normalmente se usa el constructor para inicializar variables, y el ngOnInit para inicializar o ejecutar tareras que tienen que ver con Angular (llamadas a backend, preparación de los datos, filtrado, etc.)

Ivan Sangueza Alarcon

student•

Ejemplo en la vida Real

Imagina que estás construyendo una aplicación de redes sociales en Angular. Tienes un componente Publicación que muestra las publicaciones de los usuarios y un componente Comentario que representa un comentario en una publicación.

Utilizarías ngOnChanges en el componente Comentario para detectar cuando se actualizan los datos de entrada, como cuando un usuario cambia su nombre de usuario.

En ngOnInit, podrías cargar los datos iniciales de la publicación y los comentarios asociados.

ngAfterViewInit podría ser útil si necesitas realizar acciones después de que la vista se haya inicializado completamente, como interactuar con elementos de la interfaz de usuario.

ngOnDestroy sería importante si necesitas limpiar recursos o cancelar suscripciones antes de que el componente sea destruido.

Brandon Lee Aguero Fernandez

student•

Me gusto este ejemplo. Quiero añadir que ngOnChanges, sería mejor para validaciones de respuesta en formularios, pero se entiende totalmente lo que quieres transmitir, saludos👋

Josué Isaac Fuentes López

student•

Es una de mis clases favoritas, pero seria buenísimo que explicaran todos los ngAfter

Diego Jurado

student•

Así, imagino que aplicando de a poco lo disponible!

Diego Frank Lipa Choque

student•

ngOnInit() es ideal para cualquier solicitud de datos asincrónicos a una API para preparar el componente antes de renderizarlo.

ngOnDestroy() se ejecutará cuando el componente es destruido, o sea, cuando ya no existe en la interfaz del navegador. Suele utilizarse para liberar espacios de memoria que el componente requiera.

Richard Fernando Jiménez

student•

Genial Nicolas, aunque ya manejo Angular un poco bien, siempre es bueno recapitular ya que se aprende algo nuevo.

Andres López

student•

Mi resumen de la clase:

Constructor: corre antes del render, esta etapa del ciclo de vida se ejecuta una vez cuando se crea cuando se crea la instancia del componente. En este punto no se deben ejecutar tareas tareas asíncronas como consultas a una API. Si se puede ejecutar tareas que se ejecuten de inmediato como reasignar una propiedad.
ngOnChanges: se ejecuta antes y durante el render. Actualiza los cambios en los inputs. Se ejecuta cada vez que hay un cambio en el input del componente.
ngOnInit: se ejecuta antes del render. En este si se puede ejecutar tareas asíncronas. Se ejecuta una vez.
ngAfterViewInit: se ejecuta después del render. En este se manejan de forma programática los hijos del componente.
ngOnDestroy: se ejecuta cuando se elimina el componente. Un ejemplo es cuando se tiene un ngIf y se deja mostrar el componente, en ese campo dicho componente se destruye.

Harold Jara

student•

Resumen de la clase:

Ciclo de vida en Angular. Al momento de cargar el render, se ejecuta el ciclo de vida: Constructor: se ejecuta una única vez y es el primero en ejecutarse. ngOnChange: se ejecuta antes y durante el render, valida todos los cambios de los inputs en todo momento. ngOnInit: se ejecuta antes del render y solo una única vez. ngAfterViewInit: corre después del render y únicamente maneja los hijos del componente. ngOnDestroy: Se ejecuta cuando se quita un elemento del render,EJP: un ngIf que oculte una etiqueta.

Felipe Anibal Diaz Rodriguez

student•

Ciclo de vida de componentes de Angular

Constructor(){ //siempre de primera // no async } ngOnChanges(){ //antes y durente // cambios en los inputs } ngOnInit(){ //corre antes de // async fetch una sola vez } ngAfterViewInit(){ //corre despues de renderizado //aqui se manejan los eventos de los hijos // se manifiesta en la directivas }

ngDoCheck(){ } ngOnDestroy(){ //delete component }

Javier Marin Ayza

student•

Muy bueno profe en algunas ocasiones he tenido errores por ejecutar sentencias done no tocaba y me volvía un poco loco buscando que es lo que pasaba y porque no funcionaban las cosas. Muy bueno Nico!!!!

Miguel Angel Reyes Moreno

student•

Ciclo de vida de componentes

El constructor es algo que corre desde el inicio de vida del componente...

import {
  Component,
  Input,
  Output,
  EventEmitter,
  OnInit,
  OnChanges,
  AfterViewInit,
  OnDestroy
} from '@angular/core';

@Component({
  selector: 'app-img',
  templateUrl: './img.component.html',
  styleUrls: ['./img.component.scss']
})
export class ImgComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
  @Input() img: string = ''; //* se comunica con el hijo

  @Output() loaded = new EventEmitter<string>(); //* se comunica con el padre

  imageDefault = './assets/images/default.png'

  constructor() {
    //* before render - only once
    console.log(`constructor => this.img = ${this.img}`);
    //! NO EJECUTES FUNCIONES ASÍNCRONAS AQUÍ
  }

  ngOnInit(): void {
    //* before render - only once
    //* aquí sí podemos usar async await
    console.log(`ngOnInit => this.img = ${this.img}`);
  }

  ngOnChanges(): void {
    //* before and while render
    //* cambios en los *inputs* - muchas veces
    console.log(`ngOnChanges => this.img = ${this.img}`);
  }

  ngAfterViewInit(): void {
    //* after render
    //* maneja los hijos
    console.log(`ngAfterViewInit`);
  }

  ngOnDestroy(): void {
    //* cuando ya no existe el componente
    console.log(`ngOnDestroy`);
  }

  imgError() {
    this.img = this.imageDefault;
  }

  imgLoaded() {
    console.log('log hijo!');
    this.loaded.emit(this.img); //* notificando al padre
  }
}

Diego Fernando Caviedes Camaho

student•

Tengo una duda con respecto a pasarle un input a un componente hijo cuando se destruye cuando esta dentro de un componente padre.