Force label float when no input data in Angular Material

Question

In Angular Material, the default design of input directives is for the content within <label> to be displayed in the input element until the user enters some input, at which point it will float above the input element, as seen in all examples here.

Is there any way to force the labels to float above the input box at all times instead, even when no data has been entered?

Answer 1

I think the css class md-input-has-placeholder is what you need:

<md-input-container class="md-input-has-placeholder">
  <label>Name</label>
  <input type="text"/>
</md-input-container>

Plunker example here

Hope it helps.

Answer 2

The is an official feature for that: floatLabel="always"

The floatLabel property of can be used to change this default floating behavior. It can set to never to hide the label instead of float it when text is present in the form field control. It can be set to always to float the label even when no text is present in the form field control. It can also be set to auto to restore the default behavior.

<mat-form-field floatLabel="always">
    <mat-label>Both a label and a placeholder</mat-label>
    <input matInput [(ngModel)]="model.value">
</mat-form-field>

source, see the official form-field documentation

Answer 3

With Md-select this worked for me:

 <md-input-container style="width: 200px;" md-input-has-placeholder>
                  <placeholder>Snack Types </placeholder>
                    <md-select ng-model="selectedOption">
                        <md-option  ng-repeat="item in snacks" >
                            {{item.name}}
                        </md-option>
                    </md-select>
 </md-input-container>