Toggle underline for mat-form-field matInput on and off on click

Question

Is it possible to toggle the underline for a matInput of a mat-form-field on and off using either CSS or backend Typescript?

I have seen something such as this question which shows it can be removed with css such as:

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

But I am unsure whether this can be implemented within an [ngClass] to toggle it?

The question also shows that it can be done programatically, however I am unaware of if this is reversible, and also I am using material design with the prefix mat rather than md...

@ViewChild('input') input: MdInputDirective;

ngOnInit(){
  this.input.underlineRef.nativeElement.className = null;
}

Here is my blitz

score 2 · Answer 1 · answered Sep 24 '19 at 08:17

You can apply/remove a class based on some condition in your component (use boolean for example). see [ngClass] or [class.class-name] for usage.

the above comment can help you half.... the underline class is set automaticaly by angular material.

<div class="mat-form-field-underline"><span class="mat-form-field-ripple"></span></div>

A workaround of this issue is to add a class in the mat-form-field

<mat-form-field [ngClass]="{'form-field--read':field.readOnly }" > <input matInput .........  /> </mat-form-field>

and combine it with scss/css:

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

score 0 · Answer 2 · answered Dec 10 '18 at 12:17

0

try this way

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

answered Dec 10 '18 at 12:17

Lalji Tadhani

14,041
3
23
40

1

Yes, this is the CSS class that enables the underline to be removed, but my question is how can I use something like this to toggle the line on and off? Would it be possible to use `::ng-deep .mat-form-field-underline` within an `[ngClass]`? – physicsboy Dec 10 '18 at 13:14

score 0 · Answer 3 · edited Apr 05 '21 at 01:51

0

Add the following code to your mat-form-field:

[ngClass]="{'mat-form-field-invalid': errorExists}"

errorExists is a boolean that represents whether there is currently an error or not. If you already have a variable for the error, you can do something like "error != " instead of errorExists

edited Apr 05 '21 at 01:51

Nguyễn Văn Phong

13,506
17
39
56

answered Apr 04 '21 at 23:04

Vamshi Gujju

1

score -1 · Answer 4 · answered Dec 10 '18 at 13:41

-1

You can apply/remove a class based on some condition in your component (use boolean for example). see [ngClass] or [class.class-name] for usage.

https://stackblitz.com/edit/angular-9w1w4b

answered Dec 10 '18 at 13:41

Sachin Gupta

4,981
3
16
32

Is there any chance you could provide a more specific example? – physicsboy Dec 10 '18 at 13:46
You can update css using given classes. See the CSS file in the blitz. I've added underline when `one-class` is applied. – Sachin Gupta Dec 10 '18 at 14:12
I am passing hardcoded strings `green` and `red` from the HTML, you can update the condition is the component itself and check for them in the `[ngClass]` – Sachin Gupta Dec 10 '18 at 14:13

Toggle underline for mat-form-field matInput on and off on click

4 Answers4