Comment utiliser ngOnChanges ?

ngOnChanges est une méthode de cycle de vie dans les composants Angular qui est appelée chaque fois que des modifications sont apportées aux propriétés de l'objet d'entrée du composant, qui sont déclarées dans l'annotation @Input(). Cette méthode prend en paramètre un objet de type SimpleChanges, qui contient les propriétés avant et après leur modification.

Voici un exemple de code qui montre comment utiliser ngOnChanges :

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

@Component({
  selector: 'app-my-component',
  template: `
    <p>La valeur est : {{ value }}</p>
  `,
  standalone: true
})
export class MyComponentComponent implements OnChanges {
  @Input() value = '';

  ngOnChanges(changes: SimpleChanges) {
    if (changes.value) {
      console.log('La valeur a changé de', changes.value.previousValue, 'à', changes.value.currentValue);
    }
  }
}

Dans cet exemple, la méthode ngOnChanges est appelée chaque fois que la propriété value du composant est modifiée. Si la valeur de value a changé, un message est affiché dans la console avec la valeur précédente et la valeur actuelle.

SimpleChanges est un objet qui contient les propriétés qui ont été modifiées et leurs valeurs avant et après la modification, et qui est passé en paramètre de la méthode ngOnChanges du composant. Cet objet vous permet de réagir aux modifications apportées aux propriétés d'entrée du composant.

Il est important de noter que ngOnChanges ne sera appelé que si la propriété est déclarée dans l'annotation @Input(), et que la valeur de la propriété a réellement changé. Si la valeur de la propriété n'a pas changé, ngOnChanges ne sera pas appelée.