Material Design: how to disconnect float label for select?

Question

I need to create select field without float label but I want to have placeholder and default value.

I read docs https://material.angular.io/components/form-field/overview#floating-label and tried to do it by myself.

<mat-form-field [floatLabel]="never">
  <mat-select placeholder="All categories" [formControl]="catForm" multiple> //First opportunity for use placeholder
    <mat-option *ngFor="let category of categories" [value]="category.name">
      {{ category.name }}
    </mat-option>
  </mat-select>
  <!-- <mat-placeholder>All categories</mat-placeholder> -->//Second opportunity for use placeholder
</mat-form-field>

And anyway I get float label. That am I doing wrong?

Answer 1

The correct way is that:

<mat-form-field floatLabel="never">

Square brackets for variables.

Answer 2

Sergei R has the correct usage for basic inputs (input type=text) but for the dropdown (select), it simply doesn't work. Even the Angular Material docs (https://material.angular.io/components/form-field/overview#floating-label) have sample code that (when augmented for this specific scenario, floatLabel="never"), indicate that it doesn't work: https://angular-vij8al.stackblitz.io

I added the fourth example of how to get the placeholder effect without the label (but you lose the ability to use more complex text).