How to disable keyboard interaction of md-select in angular 4?

In your md-option, add (keydown)="$event.stopPropagation()":

<md-select placeholder="Favorite food" >
  <md-option *ngFor="let food of foods" [value]="food.value" 
             (keydown)="$event.stopPropagation()" >
    {{ food.viewValue }}
  </md-option>
</md-select>

Link to working demo.


For Angular-v7 and above: Use a input control so that we don't need to change built-in behavior of Angular Material Select, as @RyanDiehl suggested we should avoid.

Note: I'm adding this answer because I believe this sort of behavior will be required when someone wants to add a filter or to allow user to insert option into options. So I took the liberty to add this answer for other developers like myself, who have this situation.

In input, add (keydown)="$event.stopPropagation()":

    <mat-form-field>
  <mat-select placeholder="Favorite food" multiple>
    <mat-form-field class="example-form-field">
      <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value"
      (keydown)="$event.stopPropagation()">
      <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="save()">
        <mat-icon>done</mat-icon>
      </button>
    </mat-form-field>
    <mat-divider></mat-divider>
    <mat-option *ngFor="let food of foods" [value]="food.value" >
      {{food.viewValue}} <span> <button mat-button matSuffix mat-icon-button aria-label="Clear"
          (click)="delete(food.value)"
           >
          <mat-icon>close</mat-icon>
        </button></span>
    </mat-option>
  </mat-select>
</mat-form-field>

Link to working demo.

GitHub Issue