Can't bind to 'shouldLabelFloat' since it isn't a known property of 'input'

Question

Based on the api documentation, shouldLabelFloat is a property of MatInput. But I'm still getting the error.

<mat-form-field>
  <input matInput [shouldLabelFloat]="true" placeholder="First Name">
</mat-form-field>

Answer 1

After a bit of digging, it looks like the documentation site is a bit broken and shows properties that are meant to be private. There's currently a pull request that was already merged with this fix to remove private getters. Here's the code for more info.

---

Anyways, the correct property to use is the floatLabel input of MatFormField as follows:

<mat-form-field floatLabel="always">
  <input matInput [(ngModel)]="firstName" placeholder="First name">
</mat-form-field>

The floatLabel input accepts three properties: auto, always or never.

---

Here's some references:

• Api documentation for MatFormField
• Overview docs on placeholders
• Stackblitz Demo