Изменение цвета ряби формы мата условно

Question

Я работаю над угловым приложением. Я использую поле mat-form-field следующим образом.

<mat-form-field appearance="fill">
    <mat-label id="title">{{ title }}
    </mat-label>
    <input formControlName="title" matInput id="title" (click)='updateValue("title")' readonly>
</mat-form-field>

Я получаю поле формы прямоугольника с приведенным выше кодом. Когда я наводил курсор на нижнюю строку поля формы мата, например, когда я наводил указатель мыши на нижнюю часть определенного поля формы, я хочу изменить цвет. За это я подаю в суд на следующий CSS

.mat-form-field-ripple {
    background-color: #00798e;
}

По умолчанию меняет цвет основы поля формы мата. Проблема, с которой я столкнулся, заключается в том, что мне нужен другой цвет в каком-то другом состоянии. Например, в моем компоненте у меня есть переменная. Если это значение X, то я хочу цвет выше, а если значение Y, то я хочу применить другой цвет пульсации. Поскольку mat-form-field-ripple кажется встроенным свойством поля mat form, я не могу изменить цвет во время выполнения. Какой бы цвет я ни дал в приведенном выше коде, он применяется в каждом состоянии. Но я хочу другого цвета в разных условиях. Как я могу это сделать?

Answer 1

Вы можете привязать цвет элемента HTML к переменной. Что-то типа:

<mat-form-field [style.background-color]="color">

И определите цвет переменной в вашем файле.ts

color: string = "red"

Таким образом, всякий раз, когда вы меняете значение переменной color, цвет фона элемента также должен меняться.