Angular : quelle différence entre change et ngModelChange ?

La gestion de l'évènement "Change" a été modifiée lors du passage de la version 1 à la version 2 du framework Angular. Deux notations différentes gèrent l'évènement : "(ngModelChange)" et "(change)". Les évènements ne sont pas déclenchés au même moment et la valeur appelée en paramètre de la fonction n'est pas la même.

La notation (change) lie l'objet à l'évènement "change" de l'objet, comme la notation classique "onchange()" en HTML. Le paramètre transmis à la fonction JavaScript sera l'évènement qui a déclenché le changement.

<select (change)="changement($evenement)" name="donnee">
      <option *ngFor="let donneeEnCours of tableauDeDonnees" [value]="donneeEnCours.id">
               {{data.name}}
        </option>
</select>
function changement(evenement) {
    //Evenement contient l'évènement transmis, on peut accéder à la donnée sélectionnée en manipulant l'attribut target
   var objet = evenement.target.data;
}

L'évènement (ngModelChange) peut être utilisé avec la directive "NgValue". En intégrant cette directive, la fonction appelée lors du changement contiendra en paramètre l'objet sélectionné, facilitant ainsi l'accès à la donnée.

<select [(ngModel)]="data" (ngModelChange)="changement($evenement)" name="donnee">
         <option *ngFor="let donneeEnCours of tableauDeDonnee" [ngValue]="donneeEnCours">
               {{data.name}}
          </option>
  </select>
dataChanged(objet) {
    //La paramètre "objet" contient la donnée sélectionnée
}

Autour du même sujet

AngularJS

Angular : quelle différence entre change et ngModelChange ?
Angular : quelle différence entre change et ngModelChange ?

La gestion de l'évènement "Change" a été modifiée lors du passage de la version 1 à la version 2 du framework Angular. Deux notations différentes gèrent l'évènement : "(ngModelChange)" et "(change)". Les évènements ne sont pas déclenchés au même...