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

Question

I have an element I want to apply a certain class to, so I used a [class.active] conditional that is watching an Observable changes. But when I toggle it doesn't apply to the following li and breaks down the whole app:

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

I found that if i use to [ngClass] instead, it works perfectly:

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

Why is that? Can anyone throw some light on this?

Thanks!

Answer 1

Can't tell for sure, but just couple ideas what you could check:

• Change Observable to EventEmitter, they perform slightly differently; you can read here for more information.

• Observable event can be generated somewhere outside of angular NgZone; in that case, you'd need to inject it in your component and update your property through something like this:

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

This way angular would see your changes which it would not have been able to see otherwise. You can read more about zones here: another link