(change) vs (ngModelChange) em angular

Angular 1 não aceita onchange()evento, apenas aceita ng-change()evento.

O Angular 2, por outro lado, aceita ambos (change)e (ngModelChange)eventos, que ambos parecem estar fazendo a mesma coisa.

Qual é a diferença?

qual é o melhor para o desempenho?

ngModelChange :

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

vs mudança :

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

(change) evento vinculado ao evento de alteração de entrada clássica.

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

Você pode usar o evento (change) mesmo que não tenha um modelo em sua entrada como

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

(ngModelChange)é a @Outputdiretiva ngModel. É acionado quando o modelo é alterado. Você não pode usar este evento sem a diretiva ngModel.

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

À medida que você descobre mais no código-fonte, (ngModelChange)emite o novo valor.

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

Então isso significa que você tem a capacidade de tal uso:

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

Basicamente, parece que não há grande diferença entre dois, mas os ngModeleventos ganham força quando você o usa [ngValue].

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>

dataChanged(newObj) {
    // here comes the object as parameter
}

suponha que você tente a mesma coisa sem " ngModelcoisas"

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>

changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}

No Angular 7, o (ngModelChange)="eventHandler()"disparo será acionado antes que o valor vinculado [(ngModel)]="value"seja alterado, enquanto o (change)="eventHandler()"disparo será acionado após o valor vinculado a [(ngModel)]="value"ser alterado.

Como eu encontrei e escrevi em outro tópico - isso se aplica a angular <7 (não tenho certeza de como está no 7+)

Apenas para o futuro

precisamos observar que [(ngModel)]="hero.name"é apenas um atalho que pode ser retirado o açúcar para: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Portanto, se descodificarmos o código, acabaremos com:

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

ou

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

Se você inspecionar o código acima, notará que terminamos com 2 ngModelChangeeventos e esses precisam ser executados em alguma ordem.

Resumindo: se você colocar ngModelChangeantes ngModel, obtém o $eventvalor como novo, mas o objeto do modelo ainda mantém o valor anterior. Se você o colocar depois ngModel, o modelo já terá o novo valor.

FONTE

1 - (change) está associado ao evento HTML onchange. A documentação sobre o HTML onchange diz o seguinte:

Executar um JavaScript quando um usuário alterar a opção selecionada de um <select>elemento

Fonte: https://www.w3schools.com/jsref/event_onchange.asp

2 - Como mencionado anteriormente, (ngModelChange)está vinculado à variável do modelo vinculada à sua entrada.

Então, minha interpretação é:

• (change)dispara quando o usuário altera a entrada
• (ngModelChange) é acionado quando o modelo muda, seja consecutivo a uma ação do usuário ou não