'Conditionally applying css to mat form field

I am working on an angular application and I am using mat form fields in it. For changing color of botttom border of mat form field I am using mat-form-field-ripple css which is inbuilt for mat form field. CSS is as follows.

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

When I use this CSS, it automatically gets applied to all form fields. I have to apply #f9c940 color in mat-form-filed-ripple in when one condition is true and a different color when another condition is true. My mat form field code is as follows:

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

I was trying to do it using ngClass as shown above but not getting it. How can I do that?

cssangularangular-materialangular7angular8


Solution 1:[1]

ngClass doesn't work with <mat-form-field>. Use this syntax-

<mat-form-field [class.mat-form-field-invalid]="booleanVariable">

and in the .ts file, you can conditionally update the booleanVariable

Solution 2:[2]

You can apply classes conditionally like this:

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

Solution 3:[3]

Just create your own CSS class:

.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..
}

Then apply it conditionally to your label:

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

In your component you have the expression it is based on:

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..

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sheshaj Awasthi
Solution 2 StepUp
Solution 3

Related Questions