Fire an event on close of multiselect dropdown in Angular material

Question

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.

Answer 1

<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

Answer 2

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.