0

I have a page with multiple dropdowns as filters and I have a function listener for when any dropdown changes to update filtering.

<select [(ngModel)]="filters.foo" (change)="update()">...</select>
<select [(ngModel)]="filters.bar" (change)="update()">...</select>
<select [(ngModel)]="filters.quz" (change)="update()">...</select>
<select [(ngModel)]="filters.lol" (change)="update()">...</select>
<select [(ngModel)]="filters.wtf" (change)="update()">...</select>

But when my update() function is executed the filters object hasn't been updated yet.

This plunker shows the issue, load the page and type anything on the inputs:

How can I call update() only after the model has been updated?

A. Matías Quezada
  • 1,886
  • 17
  • 34

1 Answers1

0

Found the solution: Instead of listening to native events we listen to ngModelChange event.

<select [(ngModel)]="filters.foo" (ngModelChange)="update()">...</select>

I read somewhere you can remove the parenthesis from ngModel like this

<!-- THIS DIDN'T WORK FOR ME -->
<select [ngModel]="filters.foo" (ngModelChange)="update()">...</select>

But this didn't work for me so I left the parenthesis and now it works perfectly :)

Community
  • 1
  • 1
A. Matías Quezada
  • 1,886
  • 17
  • 34
  • 1
    The 2nd snippet will not work because `[property]` propagates the data from component to template only so when you update it manually by selecting the dropdown's option, it will not update `filters.foo`. For that you need to use `(property)` syntax that propagates the data from template to component. If you need both behaviors, you have to use `[(property)]` which you have used in the first snippet - I just wanted to clarify what went wrong. – codef0rmer Jun 19 '16 at 15:14