Trying to create a scenario where the mat-ink-bar in my mat-tab-group has different colors. Using local references and NgClass.
Even though the styles are working fine, getting an error in the console:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'one'. Current value: 'two'.
Here's the code snippet:
HTML:
<mat-tab-group
class="<some other classes>"
...
#tabGroup
[ngClass]="tabGroup.selectedIndex === 1 ? 'one' : 'two'"
>
SCSS:
.one.mat-primary .mat-ink-bar{
background: blue !important;
}
.two.mat-primary .mat-ink-bar{
background: red !important;
}
Reading up on NgClass posts, noticing that true and false values keep changing. Wondering why I'm experiencing this error using a different approach. Could it be due to other developers modifying variables within NgAfterViewChecked or NgOnChanges?
Appreciate any insights!