mat-form-field floatLabel="never" not working - angular-material

Question

For some reason using Angular 8 this parameter of never does not work for me on a mat-select.
<mat-form-field appearance="outline" floatLabel="never">
<mat-label>Lesson</mat-label>
<mat-select [(value)]="selected" (selectionChange)="onMenuChange($event.value)">
<mat-option value="T1">Lesson 1</mat-option>
<mat-option value="T2">Lesson 2</mat-option>
<mat-option value="T3">Lesson 3</mat-option>
</mat-select>
</mat-form-field>
Always and Auto work, but never won't seem to make it go away.

Answer 1

Managed to come up with the following scss to imitate the label not floating:
.some-custom-class-name {
&.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: none;
width: initial;
opacity: 0;
}
&.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap {
border-top-color: initial;
}
/* Not required, only used to reposition the label slightly
&.mat-form-field-appearance-outline .mat-form-field-label {
top: 1.54375em;
margin-top: -0.25em;
}
*/
}
<mat-form-field appearance="outline" class="some-custom-class-name">
<mat-label>Shouldn't float</mat-label>
<input matInput>
</mat-form-field>
Just append the some-custom-class-name class to the mat-form-field and it should work.

Answer 2

try to use floatLabel="never" or floatLabel="always"

Answer 3

My solution is kinda a shortcut of solution suggest by Dane Brower.
::ng-deep &.mat-form-field-appearance-outline.mat-form-field-should-float {
.mat-form-field-label {
display: none;
}
.mat-form-field-outline-gap {
border-top-color: initial;
}
}
In comparison to his solution, this one just removes the label element from DOM (via display: none) since we don't need it anymore. We also need ::ng-deep pseudo-class here since mat-form-field-... elements are encapsulated within mat-form-field.
Note: you have to be carefull with ::ng-deep and try to prefix it with :host in order to not apply its style globally (in my case :host ::ng-deep didn't work here).

Answer 4

Please refer to https://github.com/angular/components/issues/18267
Just add a place holder in the mat-select.
Like this: <mat-select placeholder="FL">

Answer 5

TLDR:
Just remove the <mat-label> and use a placeholder on <mat-form-field> instead.
You can hide the floating label, you just have to approach the 'outline' variant differently. And there is absolutely no need to forcefully override the label via some weird css hack.
From the Angular Material docs:
Note: only the legacy appearance supports the never option. never was originally added as a way to make the floating label emulate the behavior of a standard input placeholder. However the form field now supports both floating labels and placeholders. Therefore in the non-legacy appearances the never option has been disabled in favor of just using the placeholder.
So it's actually the intended behavior for the 'outline' variant.
All you have to do is to just use the placeholder attribute on <mat-form-field> instead of adding a <mat-label>.
In your case:
<mat-form-field appearance="outline" floatLabel="never" placeholder="Lesson">
<mat-select [(value)]="selected" (selectionChange)="onMenuChange($event.value)">
<mat-option value="T1">Lesson 1</mat-option>
<mat-option value="T2">Lesson 2</mat-option>
<mat-option value="T3">Lesson 3</mat-option>
</mat-select>
</mat-form-field>
So basically people usually add a label they don't even want and need, only to look for css hacks to hide it...