javascript - Angular how to conditionally change css class?

Question

I have an icon with a default class , the class name is card-icon , now how do I change the class based on condition or disable the class ?

Because the default color of the icon is gray now when condition is met or condition true I want to change it to black color.

The condition is below , when condition is true disable class="card-icon" or if it is not possible to disable then replace when a new class for example [class.newclass] .

Any idea how to implement this guys ? Thank you.

#Icon with default class

 <mat-icon class="card-icon">group</mat-icon>

#Condition

<mat-icon class="active-icon" [class.newclass]="currentTabElement === 'group'">group</mat-icon>

Answer 1

you can use ng class property in angular to switch between CSS classes as an example, if I want to create a toggle button that needs to switch between the dark background and light background I can do the following changes.

HTML file
<div [ngClass]="{'black-background':blacked, 'white-background':!blacked}">

CSS / SCSS file

.black-background {
    background-color: #000;
}
.white-background {
    background-color: #FFF;
}

TypeScript file In the typescript file, you need to have the property blacked value which we pass in the HTML tag need to be true or false

blacked = true;

for now, the blacked value is true, so black-background value is true so now we can see the black background. If property blacked=false; then the white-background value is true because we pass white-background:!blacked. So like that we can toggle between the CSS classes.