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

Question

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:

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

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.

GCSDC · Accepted Answer · 2019-03-22 14:10:45Z

6

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>

answered Mar 22, 2019 at 14:10

GCSDC

3,5304 gold badges31 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bhadresh Patel Over a year ago

This only help you to show floating label but not focus element itself.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related