Angular Material: how to set floatPlaceholder to never

Question

Library: Angular Material (material2)

I would like to use the MdInputContainer's floatPlaceholder directive, so that the placeholder/hint never floats.

I don't see where it states the values it expects in the documentation:

@Input() floatPlaceholder: Whether the placeholder should always float, never float or float as the user types.

taken from: https://material.angular.io/components/input/api

<md-input-container [floatPlaceholder]="false">
  <input type="text" mdInput placeholder="Search...">
</md-input-container>

I've tried false and "never" for the values as my best guesses, but neither prevents the placeholder from floating above the input.

Answer 1

You can set the floatPlaceholder input to: auto, always, never.

<md-input-container floatPlaceholder="never">
          <input type="text"
                 mdInput
                 placeholder="Search...">
</md-input-container>

---

Update (Angular Material 6):

Now you have to use floatLabel:

<mat-form-field floatLabel="never">
    <input matInput placeholder="Search...">
</mat-form-field>

Stackblitz Demo

Answer 2

You can also set this as a global setting in your AppModule like this:

Import the MAT_FORM_FIELD_DEFAULT_OPTIONS into your AppModule

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material';

Pass it into the providers array of the module (additional code omitted with ...):

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { float: 'never' } },
    ...
  ],
  bootstrap: [...]
})
export class AppModule {}

Answer 3

For Angular 10 this works fine

import { NgModule } from '@angular/core';
import { MatAutocompleteModule } from '@angular/material/autocomplete';


  @NgModule({
    exports: [
      MatAutocompleteModule,
      // other modules needed
    ],
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } },
  ],
  declarations: [],
})
export class MaterialModule { }