How to Hide/Delete Underline Input Angular Material?

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.

This worked for me:

::ng-deep .mat-form-field-underline {
    display: none;
}

Add it to the component's scss or css

::ng-deep .mat-form-field-underline {
  display: none;
}

the above code will remove the default black underline

::ng-deep .mat-form-field-ripple {
  display: none;
}

this will remove the on focus ripple effect

This worked for me

.mat-form-field-appearance-legacy .mat-form-field-underline {
    height: 0 !important;
}

you can set your appearance to none in mat-form-field tag like this :

<mat-form-field class="header-search-form-field" appearance="none">
    <mat-label>search</mat-label>
    <input matInput placeholder="add product/>
</mat-form-field>

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;
}

The other answers didn't work for me, but this did:

md-input-container input {
        border: none;
}

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.

just set appearance="none" inside the tag

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