Turning off the Floating Placeholder on Angular Material Input Fields

Photo by Lance Anderson on Unsplash

Scenario

When we click on an Angular Material input field the placeholder label floats to the top. We want to turn this off.

Approach

Add floatLabel=”never” directive:

<mat-form-field floatLabel="never">
    <input matInput placeholder="Search">
</mat-form-field>