[Fixed] How not to show selected value in mat-select

Issue

Here is a simple select from Angular Material library

<mat-form-field class="ui20-filter-select">
   <mat-label>Priority</mat-label>
   <mat-select name="byPriority" [(ngModel)]="filter.priority (selectionChange)="filterChanged.next($event)">
      <mat-option [value]="priority" *ngFor="let priority of availablePriorities">{{priority}}</mat-option>
   </mat-select>
 </mat-form-field>

It is used to filtering some collection of objects by they priorities. Now I need to introduce a new design solution which assumes that applied filters will be displayed in different UI component, not in that select. So I need the select to NOT to display the selected values. It should always look like word "Priority" with arrow on it right side.
Is it possible at all? I see nothing similar in component API.

Solution

You can do it with select trigger:

<mat-form-field class="ui20-filter-select">
   <mat-label>Priority</mat-label>
   <mat-select name="byPriority" [(ngModel)]="filter.priority (selectionChange)="filterChanged.next($event)">
      <mat-select-trigger>
        Priority ->
      </mat-select-trigger>
      <mat-option [value]="priority" *ngFor="let priority of availablePriorities">{{priority}}</mat-option>
   </mat-select>
 </mat-form-field>