CODEWITHSUNDEEP
javascriptjqueryangulardomangular-material
Sumit Sinha
Sumit Sinha

Reputation: 329

Fire an event on close of multiselect dropdown in Angular material

How to fire an event on close of multiselect dropdown in angular material? This is my HTML template

                  <mat-select  multiple
                  (focusout)="triggerEvent($event)">
                    <mat-option *ngFor="let option of templateOptions"[value]="option">
                      {{option.name}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>

As of now event is getting fired on every selection of options. I want it to be triggered when user has done selecting all the values and clicks outside. I have tried blur also but same result.

Upvotes: 11

Views: 17028

Answers (2)

Amir Azizkhani
Amir Azizkhani

Reputation: 1804

in version of angular material that i use(7.1.1>) you can use closed event like this:

 <mat-select (closed)="method()">
 ...
 </mat-select>

see this example in stackblitz.

Upvotes: 14

J.C. Fong
J.C. Fong

Reputation: 546

<mat-select multiple (openedChange)="triggerEvent($event)">
    <mat-option *ngFor="let option of templateOptions"[value]="option">
        {{option.name}}
    </mat-option>
</mat-select>

Seems like you are looking for openedChange event emitter. Event emitted when the select panel has been toggled.

document

Upvotes: 16

Related Questions