No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
6H
37M
51S

Ciclo de vida de componentes

6/20
Recursos

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:

ciclo de vida de componentes.png

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.

Aportes 23

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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!

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

Importante destacar que la 鈥榙estruccion鈥 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 鈥渋mplements 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.