Why the [class.someClass] and [ngClass] bindings work differently with myObservable $ | asynchronous?

Question

I have an element to which I want to apply a specific class, so I used the [class.active] condition, which observes the changes of the Observable. But when I switch it, this does not apply to the following li and crashes the whole application:

<li *ngFor="let room of activeRooms$ | async" [class.active]="room.name === (currentRoomName$ | async)">

I found that if I use [ngClass] instead, it works fine:

<li *ngFor="let room of activeRooms$ | async" [ngClass]="{ active: room.name === (currentRoomName$ | async)}">

Why? Can anyone shed some light on this?

Thanks!

Answer 1

I can’t say for sure, but just a couple of ideas that you could check:

• Changes observed in the EventEmitter are made somewhat differently; You can read here for more information.

• An observable event can be generated somewhere outside of angular NgZone; in this case, you will need to enter it into your component and update your property using the following:

  zone.run(() => this.prop = newValue);

This way, angular will see your changes, which it could not have seen otherwise. You can learn more about the zones here: another link