How to hide/delete underline input Angular Material?
Update:
Import MdInputDirective
import {MdInputDirective} from '@angular/material';
In compoent do following:
@ViewChild('input') input: MdInputDirective;
ngOnInit(){
this.input.underlineRef.nativeElement.className = null;
}
In html, add the #input
reference:
<md-input-container #input>
<input mdInput placeholder="Last 4 SSN">
</md-input-container>
Plunker demo
Original:
Try css:
::ng-deep .mat-input-underline {
display: none;
}
demo
This worked for me:
::ng-deep .mat-form-field-underline {
display: none;
}
Add it to the component's scss or css
I was playing a bit with the appearance
property of mat-form-field
and found that if you put a "none" value (or any other unsupported value), you will get clear input.
The code:
<mat-form-field appearance="none">
<mat-label>"None" form field</mat-label>
<input matInput placeholder="Placeholder">
</mat-form-field>
StackBlitz demo (edited from the official angular demo).
The original example can be found here: Form field appearance variants.
I admit, this is a little bit of a hack.