No tienes acceso a esta clase

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

ngDestroy & SetInput

7/20
Recursos

El hook ngOnDestroy() & SetInput tiene una importancia clave para el cuidado de nuestra aplicación. Su funcionalidad más importante es la liberación de espacio en memoria de variables para que no se acumule. Si esto llegara a suceder en tu aplicación, la misma podría volverse lenta y tosca a medida que toda la memoria del navegador es ocupada.

Liberando espacio de memoria

Todo el ecosistema Angular está basado en observables para el manejo asincrónico.

Cada vez que utilices un subscribe() para escuchar la respuesta de algún evento asincrónico (por ejemplo, el llamado a una API), es relevante realizar el respectivo unsubscribe() para liberar ese espacio en memoria.

RxJS

RxJS (Reactive Extensions Library for JavaScript) es una popular librería de Javascript para el manejo de observables. Si trabajas con Angular esta librería será tu mejor amiga.

Observa el siguiente ejemplo donde primero se importa Subscription desde rxjs para tipar la variable suscription. Guardamos el observable para posteriormente darlo de baja. También importamos interval que devuelve el observable y genera un contador que emite una pulsación, en este ejemplo, cada 1000 milisegundos.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

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

    count = interval(1000);
    suscription!: Subscription;

    ngOnInit(): void {
        this.suscription = this.count.subscribe(d => {
          console.log("contando:", d);
        })
    }

    ngOnDestroy(): void {
        this.suscription.unsubscribe();
    }

}

En el ngOnInit(), se está suscribiendo a la propiedad this.count para imprimir por consola, cada 1000 milisegundos, el contador. Podrás observar en la consola del navegador el contador corriendo:

ngDestroy & SetInput.png

Si nuestro código acabara aquí, cuando el componente es destruido, el contador continuaría ocupando memoria que ya no debería ser utilizada.

Para solucionar esto, guardamos en this.suscription el observable del contador y en ngOnDestroy() y llamamos al método .unsubscribe() para detener el contador.


Contribución creada con los aportes de Kevin Fiorentino.

Aportes 9

Preguntas 3

Ordenar por:

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

explica medio confuso, toma como ejemplo img pero en realidad son strings y se siente que no hay estructura igual podria dar un ejemplo mas practico para usar el ngOnDestroy y ngOnChanges luego el ingles… no es todo malo pero todos los cursos de angular los da el y a veces cansa escuchar a la misma persona (pasaria con cualquier profesor jaja)

que forma mas curiosa de realizar un watcher con Angular

<code> prop_img: string = '';

  @Input('prop_img')
  set changeImg(newImg: string){
    this.prop_img = newImg;
  }

😁

Son dos clases en una esta.
Primero hay que entender el uso de ngOnDestroy() para liberar espacio de memoria cuando un componente se destruye desuscribiendo observables, por ejemplo.
Otra cosa es el SetInput para estar escuchando cambios en un @Input(). Es muy útil realmente, yo lo he utilizado mucho.
Es avanzado, mastiquenlo despacio y lean la documentación oficial para entenderlo.

Podemos utilizar este método para convertir en observable a un input, de esa manera al momento de un cambio, podemos decidir que hacer con el y aplicar código de ser necesario

Lo utilizamos de la siguiente manera:

@Input()
set nombreInput(valorInput: string){
	this.variableComponente =  valorInput
	//aqui va el codigo que se ejecutara al cambiar el valor del input
}

Window.clearInterval(this.counterFc); no es lo mismo que window.clearInterval(this.counterFc);
La mayuscula inicial no permite correrlo de forma correcta.

ngOnDestroy(): Se llama solo una vez, justo antes de que Angular destruya el componente, y sirve para prevenir memory leaks, eliminando por ejemplo suscripciones a Observables e event handlers

Aqui les dejo un recurso de la documentacion oficial donde podemos complementar los ejemplos:

#AguanteAngular

En el min 8:24 hace un cambio repentino de tema, bien podrían ser 2 videos uno para ngDestroy y otro para SetInput

No veo un uso practico para el ngOnChange(), sería estupendo que nos mostrara como manipular cada cambio dentro del ngOnChange() el cual es el encargado de gestionar los cambios de estado de los @Inputs. pero por lo visto es mejor gestionarlos desde un setInput