How to disable the angular material placeholder flying above the input

Question

I've an Angular Material input. In most forms, when I click on it, I like the behavior(having the placeholder going above the input). But in some cases I need this place holder to just disappear.

Also, I need the control to not use some white space "above" the input.

1) Is it possible? How?

2) If not, what would you do to still use the style of the theme(text color, no border, size, ...) of the angular material theme ?

Not sure it helps, but here is an example where I don't want it(the search text): https://stackblitz.com/edit/angular-scgar8

Answer 1

The material field has a floatLabel property.

You can set this to never to get your desired result.

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