Appearance
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
:
ts
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éthodengOnChanges
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.