CODEWITHSUNDEEP
cssangularangular-materialng-class
brianthelion
brianthelion

Reputation: 33

Can I apply a [ngClass] conditional CSS style to a Material Component (mat-checkbox)?

I have a tree structure where each node has a mat-checkbox element. The mat-checkbox is by default blue, but I want a checkbox to be green if that individual node fulfills a certain property. I'm doing this using [ngClass] if a node classes boolean element evaluates to true. Before attempting to implement the ngClass color change condition, I was successfully setting the checkbox color property like this:

.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate, .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate {
  background-color:#0ede99 !important;
}

When I add the [ngClass] condition I'm not sure how to apply the CSS class along with the customization of the mat-checkbox color that already exists. 

<mat-checkbox [ngClass]="{'newTopic': tNode.isNew}"</mat-checkbox>

What I tried so far is doing this:

.newTopic {
     .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate, .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate {
      background-color:#0ede99 !important;
    }
}

and

.newTopic, .mat-checkbox-checked.mat-accent... [rest of CSS code]

Can this be done? I read online that two css classes can be combined by doing x.y { css code} where x and y are both classes, would that apply here even though there are several classes?

Upvotes: 1

Views: 2182

Answers (1)

waddlezzzzzz
waddlezzzzzz

Reputation: 11

This worked for me. It changed the color of the underline. sample code only..

CSS

`.my-class {
  ::ng-deep {
    .mat-form-field-ripple {
      background-color: #2ec200;
      border-bottom: 2.5px solid #2ec200;
      outline: none;
    }
    .mat-form-field-underline {
      background-color: #2ec200;
    }
  }`

HTML

<mat-form-field [ngClass]="{ 'my-class': my-conditions }">

Upvotes: 1

Related Questions