(change) vs (ngModelChange) in angular

Question

Angular 1 does not accept an event onchange(), it only accepts an event ng-change().

Angular 2, on the other hand, accepts both events (change)and (ngModelChange)those that seem to do the same thing.

Who cares?

which one is better for performance?

ngModelChange :

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

against change :

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

Answer 1

(change) event associated with the classic entry change event.

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

You can use (change) the event even if you do not have an input model, as

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

(ngModelChange) - @Output ngModel. , . ngModel.

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

, (ngModelChange) .

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

, :

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

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

, , , ngModel , [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
}

, " ngModel "

<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
}

Answer 2

Angular 7 (ngModelChange)="eventHandler()" , [(ngModel)]="value" (change)="eventHandler()" , [(ngModel)]="value" .

Answer 3

- <7 ( , 7+)

, [(ngModel)] = "hero.name" - , : [ngModel] = "hero.name" (ngModelChange) = "hero.name = $ event ".

, , :

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

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

, , 2 ngModelChange, .

: ngModelChange ngModel, $ , . ngModel, .