CODEWITHSUNDEEP
htmlangularangular-material
Codev
Codev

Reputation: 1160

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

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?

Upvotes: 6

Views: 20558

Answers (2)

ForestG
ForestG

Reputation: 18123

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>

Upvotes: 4

Badashi
Badashi

Reputation: 1170

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>

Upvotes: 14

Related Questions