How to hide/delete underline input Angular Material?

Question

I have input element in Angular Material:

<md-input-container>
<input type="text" mdInput placeholder="">
</md-input-container>

When input has focus it displays underline. How to hide or remove that?

Seem I need to set null for underlineRef?

question from:https://stackoverflow.com/questions/45556972/how-to-hide-delete-underline-input-angular-material

Answer 1

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