How to hide/delete underline input Angular Material?

angular angular-material2
Daniel picture Daniel · Aug 8, 2017 · Viewed 50.3k times · Source

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?

Answer

jurl picture jurl · Mar 28, 2019

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.

Related questions

mat-form-field must contain a MatFormFieldControl

We are trying to build our own form-field-Components at our Company. We are trying to wrap material design's Components like this: field: <mat-form-field> <ng-content></ng-content> <mat-hint align="start"><strong>{{hint}}&…

Read More
Angular Material: mat-select not selecting default

I have a mat-select where the options are all objects defined in an array. I am trying to set the value to default to one of the options, however it is being left selected when the page renders. My typescript …

Read More
Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue

I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template. <md-input-container> <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl"> </md-input-container> <md-autocomplete #auto="mdAutocomplete"&…

Read More