No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

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 ayer. Es importante seguir estas recomendaciones para buscar optimizar el rendimiento de tu aplicación.


Contribución creada con los aportes de Kevin Fiorentino.

Aportes 9

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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.

#Ciclo de Vida Componente Angular

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

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.

Estaba esperando esta clase. gracias