Условное применение css к полю формы мата

Question

Я работаю над приложением angular и использую в нем поля формы mat. Для изменения цвета нижней границы поля формы мата я использую mat-form-field-ripple css, который встроен для поля формы мата. CSS выглядит следующим образом.

.mat-form-field-ripple {
    background-color: #f9c940!important;
}

Когда я использую это CSS, оно автоматически применяется ко всем полям формы. Я должен применить цвет # f9c940 в mat-form-filed-ripple, когда одно условие истинно, и другой цвет, когда другое условие истинно. Мой код поля формы циновки выглядит следующим образом:

                        <mat-form-field appearance="fill">
                            <mat-label [ngClass]="{}">Name</mat-label>
                            <input formControlName="Name" readonly>
                        </mat-form-field>

Я пытался сделать это с помощью ngClass, как показано выше, но не получил его. Как я могу это сделать?

Answer 1

Вы можете применять классы так:

<mat-label [ngClass]="{'your-class': foo=='foo', 'your-class-another':bar=='bar' }">
    Name
</mat-label>

Answer 2

Просто создайте свой собственный CSS класс:

.mat-form-field-ripple {
    //your standard styling,
}

.myBackgroundColor {
    background-color: #f9c940!important;
// add this selector below the .mat-form-field-ripple selector so that it will override..
}

Затем примените его условно к вашей метке:

<mat-form-field appearance="fill">
    <mat-label [ngClass]="{'myBackgroundColor': mycheck}">Name</mat-label>
    <input formControlName="Name" readonly>
</mat-form-field>

В вашем компоненте есть выражение, на котором оно основано:

mycheck = true; // you will modify this true to any expression that is transformable to a boolean. If true, your class is applied, if false then not..