🔄OnChanges

OnChanges es un hook del ciclo de vida de un componente o directiva en Angular que se invoca cuando Angular reinicializa los datos-bound input properties.

Es ideal para implementar lógicas o acciones cuando los valores de las propiedades de entrada (@Input()) cambian.

Cómo Implementarlo

Importar OnChanges: Primero, necesitas importar OnChanges junto con SimpleChanges desde @angular/core.

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

Implementar OnChanges: Tu componente o directiva debe implementar la interfaz OnChanges.

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html',
  styleUrls: ['./mi-componente.component.css']
})
export class MiComponenteComponent implements OnChanges {
  @Input() miPropiedad: any;

  ngOnChanges(changes: SimpleChanges): void {
    // Lógica aquí
  }
}

Entendiendo SimpleChanges

• ¿Qué es SimpleChanges? Es un objeto que tiene un registro de cambios para cada @Input() propiedad. Para cada propiedad, puedes obtener el valor actual y el valor anterior.

• Estructura de SimpleChanges: Cada clave en el objeto SimpleChanges corresponde al nombre de una propiedad @Input(), y el valor asociado es un objeto con las siguientes propiedades:

  • currentValue: el valor actual de la propiedad.

  • previousValue: el valor anterior de la propiedad antes del cambio.

  • firstChange: un booleano que indica si este es el primer cambio del valor de la propiedad desde que se instanció el componente.

Ejemplo Práctico

@Component({
  selector: 'app-mi-componente',
  template: `<p>Hola, {{nombre}}</p>`
})
export class MiComponenteComponent implements OnChanges {
  @Input() nombre: string;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['nombre']) {
      console.log('Nombre nuevo:', changes['nombre'].currentValue);
      // Aquí puedes agregar más lógica que necesites ejecutar cuando `nombre` cambie.
    }
  }
}

Precaución con firstChange: Al iniciar el componente, ngOnChanges se dispara una vez por cada @Input() propiedad, incluso antes de ngOnInit. Usa firstChange para distinguir entre la inicialización y cambios subsiguientes.