Angular Material: how to set floatPlaceholder to never

user_2432532 0
Viewed 9943

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.

angular-material2 angular html
3 Answers

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 {}
user_22874280

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 { }
user_72276400
Related