How to bind ngclass to an observable value

Question

Is binding to an Observable<enum> possible like this in Angular?

<a [ngClass]="{selected: (mapToolBarMode$ | async) === 0 }" />

or

<a [ngClass]="{selected: (mapToolBarMode$ | async) === MapMode.Pan }" />

where mapToolBarMode$ is the observable

It doesnt seem to do anything as the observable mutates.

I think it could be to do with the value not being available in the constructor, if I do this it works, but I dont really want to do that for every value in the MapMode enum:

private mapModes: typeof MapMode = MapMode;
private isPanSelected = true;
ngOnInit() {
    this.mapToolBarMode.subscribe(v => {
        this.isPanSelected = (v === this.mapModes.Pan);
    })
}

...

[ngClass]="{selected: isPanSelected }"

Update turns out this was to do with legacy code calling angular components. those calls need to run under the context of an ngZone, otherwise there's no cycling

Answer 1

Maybe you missed a detail in your question, in my example its working fine:

Or your observable is already completed? Http request maybe?

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)="toggle()"
          [ngClass]="{selected: (mapToolBarMode$ | async) === 0 }"
          >
          Hello {{name}}, click to toggle color
      </h2>
    </div>
  `,
  styles: [
    '.selected { color: red; }'
  ]
})
export class App {
  name:string;

  mapToolBarMode$ = new Subject();

  constructor() {
    this.name = 'Angular2'
  }

  private _curState = 1;
  toggle() {
    if (++this._curState > 1) this._curState = 0;

    this.mapToolBarMode$.next(this._curState);
  }
}

live demo: https://plnkr.co/edit/h0YIPpCh9baJgxCsBQrY?p=preview