How to hide/delete underline input Angular Material?

Question

I have input element in 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

Answer 2

just set appearance="none" inside the tag

<mat-form-field style="width:40px" appearance="none"> </mat-form-field>

Answer 3

If you are using mat-form-field instead of md-input-container and google-landed here, here are your two options.

1. Just comment out the mat-form-field and use your own styles.
2. See other appearance options available for mat-form-field from the documentation.

Answer 4

For me it worked without ::ng-deep. Using Angular 6.1.10 as follows:

<form>
  <mat-form-field class="no-line">
    <input type="text"
                  matInput
                  field="label"
                  [matAutocomplete]="auto"
                  [formControl]="formControl"/>
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{ food.label}}
        </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

---

.no-line .mat-form-field-underline {
  display: none;
}