CODEWITHSUNDEEP
angularangular-material
Vingtoft
Vingtoft

Reputation: 14586

Angular Material input | How to make 'focus' layout default

I'm using Angular Material in my application. I have input fields like this: 

<mat-form-field appearance="outline">
  <mat-label>E-mail</mat-label>
  <input matInput placeholder="Indtast e-mail">
</mat-form-field>

Which produces a input form:

enter image description here

Focusing on the input form triggers an animation that transforms the input field to the following layout:

enter image description here

Question: Is it possible to have the "focus" layout (label floating in the top left corner) activated by default?

We wish to display the placeholder text, also when a field is not focused.

Upvotes: 4

Views: 3889

Answers (1)

GCSDC
GCSDC

Reputation: 3500

You may set property floatLabel of mat-form-field to "always":

<mat-form-field appearance="outline" floatLabel="always">
  <mat-label>E-mail</mat-label>
  <input matInput placeholder="Indtast e-mail">
</mat-form-field>

Upvotes: 6

Related Questions