CODEWITHSUNDEEP
angularangular-material
sah1
sah1

Reputation: 400

Angular 5 : Event handling for material dropdown

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

Upvotes: 3

Views: 1316

Answers (2)

Nithya Rajan
Nithya Rajan

Reputation: 4884

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>

Upvotes: 2

TheParam
TheParam

Reputation: 10541

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

Upvotes: 6

Related Questions