Search code examples
angularmaterialize

Materializecss multiple select no firing change in Angular 2

Using materializecss "multiple select" does not appear to fire change. How can you bind a method for when the select changes.

The following code does not fire change.

HTML
<select id="booger" multiple>
    <option value="1">{{articleIdLabel}}</option>
    <option value="2">{{articlePubDateLabel}}</option>
    <option value="3">{{articleTitleLabel}}</option>
    <option value="4">{{articleViewDateLabel}}</option>
</select>

Component
ngAfterViewInit() {
    $("#booger").material_select();
}

change() {
    console.log("change");
}
Solution

  • I was able to fix this problem with the following change to my code:

    Component
ngAfterViewInit() {
    $("#booger").material_select(this.change.bind(this));
}

change() {
    console.log("change");
}