(Change) VS (Ngmodelchange) in Angular

(change) vs (ngModelChange) in angular

(change) event bound to classical input change event.

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

You can use (change) event even if you don't have a model at your input as

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

(ngModelChange) is the @Output of ngModel directive. It fires when the model changes. You cannot use this event without ngModel directive.

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

As you discover more in the source code, (ngModelChange) emits the new value.

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

So it means you have ability of such usage:

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

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

Basically, it seems like there is no big difference between two, but ngModel events gains the power when you use [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
}

assume you try the same thing without "ngModel things"

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

ngModel changes, ngModelChange is not called

//This is a **two way** binding, so below code will not take effect
[(ngModel)]="trait.userMinimum"  
(ngModelChange)="setThresholds()" //This will not be fired

The solution is to change as below, and remove the "()" so that the get and set are separate:

[(ngModel)]="trait.userMinimum" ---> [ngModel]="trait.userMinimum"

Angular [(ngModel)] changing data after other events fire

Do not rely on the order the execution as you are not always which arrives before.
In your case, solution should be:

<mat-checkbox (ngModelChange)="togglePlatform($event)" [(ngModel)]="item.their_platform"></mat-checkbox>

togglePlatform(value) {
     // update backend with the value, not item.their_platform
}

Angular ngModelChange parameter function different to $event

if you use (ngModelChange)="filterFor($event)" in your function filterFor you received the [value] of the option selected.

if you use as value [value]="dano.make"

You can use some like

filterFor(value:any){
   this.data=value; //<--if not use [(ngModel)] else [ngModel]
                    //don't forget equal the variable to value

   const dano=this.datos.find(x=>x.make==value)
   console.log(dano) //<--here you has the whole object
   //you can, e.g.
   if (value=='Ford')....
   //or
   if (dano.comment=='The vehicle has a heavy internal..')...
}

Angular 2 change event on every keypress

I just used the event input and it worked fine as follows:

in .html file :

<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">

in .ts file :

onSearchChange(searchValue: string): void {  
  console.log(searchValue);
}

---

Related Topics