How to get selected option in change callback of AngularDart component

Question

I want to use a select HTML element to filter items in a table. For that I have a model value selectedCategoryId and event callback onFilterCategory for the change event. But when callback gets called the value selectedCategoryId is null.

I have the following HTML snippet:

<select id="category"
        class="form-control"
        [(ngModel)]="selectedCategoryId"
        (change)="onFilterCategory()">
    <option *ngFor="let category of categories"
            value="{{category.id}}">
        {{category.name}}
    </option>
</select>

And the following dart snippet:

void onFilterCategory() {
    print('onFilterCategory');
    print('this.selectedCategoryId: ' + this.selectedCategoryId);
}

Do I need to use another callback?

Answer 1

ngModelChange is the event and $event the value

(ngModelChange)="onFilterCategory($event)"

with

 void onFilterCategory(String value) {

Because you have 2-way binding

[(ngModel)]="selectedCategoryId"

you can also use

(ngModelChange)="onFilterCategory()"

with the onFilterCategory() as it is in your question.

The change event doesn't work because it fires too early - before [(ngModel)]="selectedCategoryId" was able to update selectedCategoryId.