Revoir le live Angular du 16 octobre

Anticipez le futur avec Signal Forms d'Angular

Angular 21 introduira Signal Forms, une nouvelle API expérimentale qui simplifiera radicalement la gestion des formulaires.

Basée sur les signaux, elle permettra :

  • de créer des formulaires déclaratifs avec form()
  • de lier directement les champs avec [field]
  • d'intégrer facilement les validations et la soumission
  • et de réduire le boilerplate tout en améliorant les performances
Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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é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.