I've been attempting to incorporate a third condition into my ngClass. Initially, I managed to get two classes working in my ngClass to change the row colors alternately.
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0}"
Now, I'm trying to introduce a third class and condition where the mat-list will display a border line at the top of the mat-list-item. However, upon adding the third condition, it's throwing an error.
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}"
When I make this addition, I encounter the following confusing error message:
Parser Error: Missing expected : at column 47 in [{ totalrow:i%2 != 0, odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}] in
Below is the code with the ngFor loop:
<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 assistance on this issue would be greatly appreciated.