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.

Answer 1

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>