Adding 3rd condition to ngClass is not working - css

Question

I am trying to add a 3rd condition to my ngClass. At first, I got the following two class to work in my ngClass to alternate the color of the rows
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0}"
I am trying to add a 3rd class and condition where the mat-list will show a border line for the top of the mat-list-item. However when I add the 3rd condition, it gives me an error
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}"
I get the following error which is confusing to me
Parser Error: Missing expected : at column 47 in [{ totalrow:i%2 != 0,
odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}] in
Here is the code with the ngFor
<div class="ng-container" *ngFor="let operator of operatorList; let i = index">
<mat-list-item
fxLayoutAlign="start"
style="padding-left: 0px; padding-right: 0px;"
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}">
<i class="{{operator}}"></i>
</mat-list-item>
</div>
Any help is appreciated.

Answer 1

I guess a commenter needs a deeper explanation of how this works.
<div [ngClass]="{
'is-active': condition,
'is-inactive': !condition,
'multiple': condition && anotherCondition,
}">
multiple class will apply when two conditions are both met. Not just one but both.
You could add a third like this: 'multiple': condition && anotherCondition && thirdCondition
Here's a StackBlitz of the OP's code working as he expected and without error. If I can help more pleas let me know.