Ciclo de vida de componentes

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.

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

1. 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

2. ngOnChange:
   El evento corre antes del render y durante, si detecta cambios en los inputs. Corre múltiples veces.

3. 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.

4. 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.

5. 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.

  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');
  }

#Ciclo de Vida Componente Angular

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!

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

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

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.

Estoy repasando de nuevo las clases y escribiendo código 😄 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*/

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

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.

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

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.

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.

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
}

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.

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!!!

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
  }
}

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

Estaba esperando esta clase. gracias

Hola tengo esta configuracion:
Angular CLI: 15.2.6
Node: 18.16.0
Package Manager: npm 9.5.1
OS: darwin arm64

Pareciera que NO es necesario meterle los “implements OnInit, OnChange, AfterViewInit, OnDestroy”

El codogio me queda así y funciona sin problema los console.log

export class ImgComponent {

  @Input() img: string = '';
  @Output() loaded = new EventEmitter<string>();
  imageDefault = "./assets/images/default.png";

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

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

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

  ngAfterViewInit() {
    // after render
    // hangler children
    console.log('ngAfterViewInit')
  }

  ngOnDestroy() {
    // delete
    console.log('ngOnDestroy')
  }
}

Ciclo de vida

Ciclo de Vida de componentes

El ciclo de vida en Angular describe las diferentes etapas que atraviesa un componente o directiva de Angular desde su creación hasta su destrucción.

Angular provee una serie de ganchos (hooks) que se pueden utilizar para ejecutar código en momentos específicos del ciclo de vida del componente

El ciclo de vida en Angular se compone de las siguientes fases:

• constructor: Este evento se dispara cuando se crea una instancia del componente,
  • Solo se ejecuta una vez antes del render del componente.
  • No tiene que utilizarse para procesos asincrónicos.
• OnChanges: El hook ngOnChanges() se dispara cuando se detectan cambios en las propiedades de entrada del componente.
  • Se ejecuta N cantidad de veces antes y durante el render del componente.
  • Puede emplearse para procesos asincrónicos.
• OnInit: Es el hook más usado, ngOnInit() se dispara cuando el componente es inicializado después de que sus propias propiedades hayan sido inicializadas.
  • Únicamente se ejecuta una vez, antes del render del componente.
  • Puede usarse para procesos asincrónicos
• AfterViewInit: Este evento se dispara después de que Angular haya inicializado las vistas hijas del componente**.**
  • Únicamente se ejecuta una vez después del render del componente.
• ngOnDestroy: Este evento se dispara justo antes de que el componente sea destruido.
  • Suele utilizarse para liberar espacios de memoria que el componente requiera.

¿Como los utilizamos?

Para utilizarlos, simplemente implementa los métodos correspondientes en tu componente o directiva de Angular.

Por ejemplo, si quieres ejecutar código después de que el componente haya sido inicializado, puedes implementar el método OnInit en tu componente de la siguiente manera:

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

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html',
  styleUrls: ['./mi-componente.component.css']
})
export class MiComponente implements OnInit {

  ngOnInit(): void {
    // aquí puedes ejecutar el código que quieres que se ejecute después de que el componente haya sido inicializado
  }

}

En este ejemplo, la clase MiComponente implementa la interfaz OnInit y define el método ngOnInit. Este método se ejecutará automáticamente después de que el componente haya sido inicializado.

De manera similar, puedes implementar otros hooks del ciclo de vida del componente, como OnChanges, AfterViewInit, etc., para ejecutar código en diferentes momentos del ciclo de vida del componente.