Mat-form-field - Styling when out of focus and with text in mat-input

Question

How can I make it so that the out of focus styles don't apply when there is text inside the mat-input while simultaneously being out of focus?

I want to keep these styles when out of focus and with text:

But right now this is what I'm getting when out of focus and with text:

Also, this is how the field looks when there is no text and out of focus:

My current styles:

.mat-form-field-appearance-outline .mat-form-field-outline {
    background-color: #FFFFFF66;
    border-radius: 10em;
    color: transparent;
    opacity: 0.5;
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: white;
    background-color: transparent;
}

Thank you in advance.

Answer 1

I see in the comments that you have noticed Angular removes the mat-focused class, so applying it to the mat-form-field directly will not work. However, we should be able to apply classes to a wrapper container that will match the 'focused' style.

• div.mat-form-field-outline has 'focused' rules when nested in an element with mat-form-field-appearance-outline and mat-focused classes

• The mat-label element has 'focused' rules when nested in an element with mat-form-field and mat-focused classes.

So we can provide the mat-form-field-appearance-outline and mat-form-field classes to a container and toggle the mat-focused class based on the form field value.

<p>
  <span
    class="mat-form-field mat-form-field-appearance-outline"
    [ngClass]="{'mat-focused': field.value}"
  >
    <mat-form-field appearance="outline">
      <mat-label>Outline form field</mat-label>
      <input #field matInput placeholder="Placeholder" />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
      <mat-hint>Hint</mat-hint>
    </mat-form-field>
  </span>
</p>

https://stackblitz.com/edit/angular-ckvs4z?file=src/app/form-field-appearance-example.html