📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !