angular: click event triggers before ng-model changes the value.

click is a DOM event, not related to the higher level ngModel. The proper event for this is ngModelChange. If you want to use DOM events, then forget about ngModel and use $event inside the handler or a #ref.

So, instead of

<input [(ngModel)]="item.completed" (click)="completed(i)" type="checkbox">

it should be

<input [(ngModel)]="item.completed" (ngModelChange)="completed(i)" type="checkbox">

Another workaround that seems to work fine is to wrap everything in your OnChange method in a setTimeout(() => { dostuff });

have you guys tried to swap the position of the [(ng-model)] and (change) to see if the position affects the outcome? <input (change)="tryPrintScaleValue()" [(ng-model)]="scale">

@ashblue Can’t you just use instead

<input [(ngModel)]="item.completed" (ngModelChange)="completed(i)" type="checkbox">

yes, i also met this case:

(with select tag)

<select [(ng-model)]="scale" (change)="tryPrintScaleValue()">...</select>

tryPrintScaleValue will be called before scale changed.

(with input tag)

<input [(ng-model)]="scale" (change)="tryPrintScaleValue()">

tryPrintScaleValue will be called after scale changed.

I have problems with this too. One workaround is to use [(ngModel)] on select instead of (change) and declade get/set methods in the component for your value and do your work the set method.

Html: `<select id=“county” class=“sc-select” [(ngModel)]=“selectedMunicipalityMod”>

<option *ngFor="let municipality of municipalities" [ngValue]="municipality"> {{municipality.name}} </option> </select>`

TS: get selectedMunicipalityMod() { return this.selectedMunicipality; } set selectedMunicipalityMod(value: Municipality) { this.selectedMunicipality = value this.search(); }

But this feels a bit too much boilerplate for what we want to do.

what I did to make it work <input type=“text” [(ngModel)]=“rowData[col.field]”(paste)=“onPaste($event,i,rowData)” (ngModelChange)=“onModelChange($event)”>

(ngModelChange) function is called when model is changed inside that setTimeout(() => { –do your stuff here update the model value });

I was experiencing this as well and here is a stack-overflow explaining it. I found that the order of ngModel and ngModelChange matter as of RC.4.

http://stackoverflow.com/questions/38512006/angular-2-rc4-select-ngmodel-delayed-update/38521630#38521630

Based on this thread it sounds like it shouldn’t matter and that it is a bug. But, if it is the way it should work then I think there is an opportunity to provide some documentation around how this works. I definitely can provide some help in documenting if need be. @wardbell @Foxandxss @naomiblack

@awerlang Yeah well I guess it deserves down vote. But I was very specific it was a work around.

Thanks for mentioning (ngModelChange). Sometimes it can be hard to know when to use (change) or (ngModelChange).

What is the status of this issue? I’m facing the same problem. Is it gonna be fixed before v20?

Edit: Nevermind I found the modelChange event, which I now use.