click event triggers before ng-model changes the value.

I am doing something like this.

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

What i want is the when checkbox is clicked it changes the value of item.completed and then it fires the click event.

But what happening is. click events get fired and then ng-model changes the value of item.completed.

[awerlang]

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

[Drol]

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