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, Mar 05 '19 at 06:48

score 6 · Accepted Answer · answered Mar 05 '19 at 06:46

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 05 '19 at 06:46

TheParam

10,113
4
40
51

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 https://stackblitz.com/edit/angular-material-with-angular-v5-jsgvx6?file=app%2Fapp.component.html – sah1 Mar 05 '19 at 10:29

score 2 · Answer 2 · answered Mar 05 '19 at 06:47

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>

Angular 5 : Event handling for material dropdown

2 Answers2