Angular 5 : Event handling for material dropdown

Question

I need to call a function in case there is a change in the value of mat-select. I have been calling that function on (click) added to mat-option.

But if we just use the keyboard to fill up the form, the function is never called(Understandably). Is there any way I can call the function on any change? onChange, change events don't appear to work. I don't have ngModel on this form-field

Update: selectionChange works for single select drop-downs but not for multi-select drop-downs and mat-autocomplete.Is there a way this can be achieved? Multi Select Example: multi-select-stackblitz

Update 2: onSelectionChange for multiple and autocomplete works.multi-autocomplete

use selectionChange to get selected value from the mat-select. please check answer for detail — TheParam
– TheParam, Commented Mar 5, 2019 at 6:48

TheParam · Accepted Answer · 2019-03-05 06:46:17Z

6

Here you can use the (selectionChange) event on mat-select.

Example :

<mat-form-field>
    <mat-select placeholder="State" (selectionChange)="someMethod($event.value)">
        <mat-option *ngFor="let state of states" [value]="state.value">
            {{ state.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

Here is Demo on stackblitz

answered Mar 5, 2019 at 6:46

TheParam

10.6k4 gold badges43 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sah1 Over a year ago

This works for single select dropdown!But for multiple select drop-down in which I have a select all functionality it does not work. Please see stackblitz.com/edit/…

Nithya Rajan · Accepted Answer · 2019-03-05 06:47:21Z

2

There's a selectionChange Event Emitter in material select which emits the value whenever the user changes the option inside the mat-select, please refer the docs here

<mat-select placeholder="State" (selectionChange)="someMethod($event.value)">

</mat-select>

answered Mar 5, 2019 at 6:47

Nithya Rajan

4,93422 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular 5 : Event handling for material dropdown

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related