How to use 'overlayDir' directive in mat-select?

Question

I want to style mat-select-panel based on its overLay position,so mat-select provides a overlayDir: CdkConnectedOverlay property.

And CdkConnectedOverlay provides property @Output() positionChange: EventEmitter<ConnectedOverlayPositionChange> but I can't seem to work it out.

Heres the doc's link: https://material.angular.io/cdk/overlay/api#CdkConnectedOverlay

 <mat-form-field>
      <mat-label>Favorite food</mat-label>
      <mat-select disableOptionCentering panelClass="select-panel-class" overlayDir (attach)="test($event)" (backdropClick)="test($event)" (positionChange)="test($event)">
        <mat-option value="food.value1">
          value1
        </mat-option>
        <mat-option value="food.value2">
          value2
        </mat-option>
        <mat-option value="food.value3">
          value3
        </mat-option>
      </mat-select>
 </mat-form-field>

----------------ts-----------------

 test(evt){
    console.log(evt)
  }

It should console log the 'backdropClick' ,'attach' and 'positionChange' events but its not displaying anything nor it is showing any errors. Am I using it correctly? If not please explain how to use it.

Federico López Federico López · Accepted Answer · 2019-08-28T11:41:38

According to Angular Material's documentation, overlayDir is not a directive but a property inside the mat-select component. So you should get mat-select component using the ViewChild decorator, then get the overlayDir property, and finally subscribe to the backdropClick event emitter. Please see this stackblitz example.

How to use 'overlayDir' directive in mat-select?

1 Answers