Включить или выключить подчеркивание для mat-form-field matInput при клике

Question

Можно ли включать и выключать подчеркивание для matInput поля mat-form-field с помощью CSS или внутреннего сценария Typescript?

Я видел что-то вроде этого вопроса, который показывает, что он может быть удален с помощью css, например:

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

Но я не уверен, может ли это быть реализовано в [ngClass] чтобы переключить его?

Вопрос также показывает, что это можно сделать программно, однако я не знаю, является ли это обратимым, а также я использую дизайн материала с префиксом mat а не md ...

@ViewChild('input') input: MdInputDirective;

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

Вот мой блиц

Answer 1

Вы можете применить / удалить класс, основываясь на некоторых условиях в вашем компоненте (используйте, например, логическое значение).см. [ngClass] или [class.class-name] для использования.

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

Answer 2

попробуйте так

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