A very common use case we get all the time in Angular is of adding classes to templates dynamically, mostly to change the styles of the component dynamically or to add custom identifiers like active/inactive states for certain components, whatever the case may be, we'll see in this snippet how one can add dynamic classes in templates.

[ngClass] attribute:

<div [ngClass]="{}"></div>

ngStyle takes in an object with class definitions in it.

<div [ngClass]="{'color-me-red': showColorRed}"></div>

Here class 'color-me-red' will get applied only if value of 'showColorRed' is true.

// we can add more logic and conditions 
<div [ngClass]="{'loader': data.length === 0 && isLoading}"></div>

// adding more classes is simple too.
<div [ngClass]="{
        'loader': data.length === 0 && isLoading,
        'loaded': data.length !==0 && !isLoading
        }">
</div>
        

That's about it with this.

Hope this helps.