(change) vs (ngModelChange) dans angular

Angular 1 n'accepte pas l'événement onchange(), il n'accepte que l'événement ng-change().

Angular 2, en revanche, accepte à la fois les événements (change) et (ngModelChange), qui semblent tous deux faire la même chose.

Quelle est la différence ?

Lequel est le meilleur pour les performances ?

ngModelChange :

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

vs change :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>
Ramesh Rajendran
Question modifiée 15 octobre 2019 в 5:19
Programmation
javascript html angular typescript angular-ngmodelchange
30 juin 2017 в 7:16
13 vues
Solution

Événement (change) lié à l'événement classique de changement d'entrée.

https://developer.mozilla.org/en-US/docs/Web/Events/change

Vous pouvez utiliser l&#8217événement (change) même si vous n&#8217avez pas de modèle à l&#8217entrée.

<input (change)="somethingChanged()">

(ngModelChange) est le @Output de la directive ngModel. Il se déclenche lorsque le modèle change. Vous ne pouvez pas utiliser cet événement sans la directive ngModel.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

Comme vous le découvrirez plus loin dans le code source, (ngModelChange) émet la nouvelle valeur.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

Cela signifie donc que vous avez la possibilité de l'utiliser :

<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
    // do something with new value
}

En fait, il semble qu'il n'y ait pas de grande différence entre les deux, mais les événements ngModel gagnent en puissance lorsque vous utilisez [ngValue].


  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">

          {{data.name}}
Michael
Réponse modifiée 9 avril 2019 в 2:48
Commentaires (9)

Dans Angular 7, le (ngModelChange)="eventHandler()" se déclenche avant que la valeur liée à [(ngModel)]="value" soit modifiée, tandis que le (change)="eventHandler()" se déclenche après que la valeur liée à [(ngModel)]="value" soit modifiée.

Tiago supports GoFundMonica
Réponse modifiée 27 décembre 2018 в 11:54
Commentaires (7)

Comme je l'ai trouvé et écrit dans un autre sujet - ceci s'applique à angular < 7 (je ne sais pas comment c'est dans 7+)

Juste pour l'avenir

nous devons observer que [(ngModel)]="hero.name&quot ; n'est qu'un raccourci qui peut être désensorcelé en : [ngModel]="hero.name&quot ; (ngModelChange)="hero.name = $event&quot ;.

Donc, si nous désucrons le code, nous obtiendrons :

<select (ngModelChange)="onModelChange()&quot ; [ngModel]="hero.name&quot ; (ngModelChange)="hero.name = $event">

ou

``

Si vous inspectez le code ci-dessus, vous remarquerez que nous nous retrouvons avec 2 événements ngModelChange et que ceux-ci doivent être exécutés dans un certain ordre.

En résumé : Si vous placez ngModelChange avant ngModel, vous obtenez le $event comme nouvelle valeur, mais votre objet modèle conserve la valeur précédente. Si vous le placez après ngModel, le modèle aura déjà la nouvelle valeur.

[SOURCE] [2]

[2] : https://github.com/angular/angular/issues/11234

Commentaires (0)