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
}