Reduce height of material option in Angular

Question

I want to reduce height of options inside 'mat-select'

<mat-form-field appearance="fill">
  <mat-select name="departureTime" ngModel>
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option | time }}
    </mat-option>
  </mat-select>
</mat-form-field>

Inside this select, user has too choose time of the day but because the height of each option is so high, one will have to scroll ages to reach their desired value.

Answer 1

The global approach would be:

.mat-select-panel {
max-height: 100vh !important;
}

and the local approach would be:

::ng-deep .mat-select-panel {
  max-height: 100vh !important;
}

Anyway I recomend you to use the global approach because ::ng-deep is deprecated.