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.