Angular mix different [ngClass] expressions - css

Question

I would like to mix the [ngClass] Expressions in Angular, first I want to add an array of classes to my component and then I would also like to add a class based on a Boolean expression.
I can add an array with <li [ngClass]="item.status"> and I can add a class based on a Boolean expression with <li [ngClass]="{active: item.active}">
Note: item.status is an array like item.status=['done', 'progressed']
But how can I mix both styles?
The following doesn't work because only the attribute is duplicate.
<li [ngClass]="item.status" [ngClass]="{active: item.active}">
Thanks in advance

Answer 1

Because you could not have [ngClass] multiple time in same element you could use the combination of [ngClass] and class. When use class in this way with interpolation then you could add several classes as well. Try to use following way.
E.g. HTML
<li class="t-size {{item.status.join(' ')}}" [ngClass]="{'active': item.active }">
E.g. Component
item = {
status : ['done', 'progressed'],
active: true
}
E.g. CSS
.done{
font-weight: bold;
}
.progressed{
color:blue;
}
.t-size{
font-size: 2rem;
}
.active{
background-color: yellowgreen;
}
WORKING DEMO
Hope this will help to you! :)

Answer 2

You can use both as below:
<li [class]="item.status" [ngClass]="{active: item.active}">
You cannot use ngClass more than one time in the single element.

Answer 3

You can do [class.myClass]="booleanExpression", but I don't recommend adding it together with [ngClass] because then you could have a class multiple times.
Instead I would recommend either making [class.myClass]="booleanExpression" for each and every class you use in that HTML-tag (keep in mind the "booleanExpression" can set/unset more than one class so it would not increase the lines of code in your .ts file, only in the template). Or I would make a getter method for [ngClass]:
[ngClass]="liClasses"
get liClasses(): string {
const result = "";
if (conditionOne) { result += " myClassOne"}
if (conditionTwo) { result += " myClassTwo"}
return result;
}
note that solution 1) is more perfomant as getter-methods get triggered on every change-detection and not only when conditionOne or conditionTwo changes.

Answer 4

you can try this code here your app component is
member = true;
paidAmount = true;
setMyClass() {
let classes = {
member: this.someProperty,
paid: this.paidAmount,
};
return classes;
}
where 'member' and 'paid' is class name
and your template use this similar code
<div class="myclass" [ngClass]="setMyClass()">Call to Action</div>