Search code examples
angulariconsng-class

NgClass ignores mdi-timelapse

So, I have the following code:

<i class="mdi"
  [ngClass]="{ 'not-started mdi-timer': task.state === 'NOT_STARTED',
               'started mdi-timelapse': task.state === 'STARTED',
               'ended mdi-timer-off': task.state ===  'ENDED'}"></i>

All icons and classes are added EXCEPT mdi-timelapse. It's weird, because if I add it in the rendered code - it works perfectly. Any other icon works as well.

Rendered code looks like this:

<i _ngcontent-iln-15="" class="mdi started" ng-reflect-initial-classes="mdi" ng-reflect-ng-class="[object Object]"></i>

Why does this happen? How can I fix this?

Solution

  • It was an order of the classes. So if you have a lot of logic in your ngClass, better use function!