How can I always display the placeholder in mat-select intependently of the current selection

Question

I want the mat-select element to always show the placeholder, even if an option is selected.

My HTML code:

<mat-select [formControlName]="'language'" placeholder="Language">
    <mat-option value="de">Deutsch</mat-option>
    <mat-option value="en">English</mat-option>
</mat-select>

The current behavior is: A soon as a language is selected, the placeholder is made small, moved to the top and the selected language is displayed is displayed big.

What I want to have: When a language is selected, still the placeholder should be displayed in big size, the selected language should not be shown.

How can I do that?

Answer 1

You can use a combination of floatLabel="never" and mat-select-trigger:

<mat-select [formControlName]="'language'" placeholder="Language" floatlLabel="never">
    <mat-select-trigger>Language</mat-select-trigger>
    <mat-option value="de">Deutsch</mat-option>
    <mat-option value="en">English</mat-option>
</mat-select>

Answer 2

You are not providing a label, and in that case, "If not specified, the placeholder will be used as label." (from documentation).

To disable it, provide a Label, and hide it.

<mat-label hidden></mat-label>
<mat-select [formControlName]="'language'" placeholder="Language">
    <mat-option value="de">Deutsch</mat-option>
    <mat-option value="en">English</mat-option>
</mat-select>