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

If that doesn't work, maybe try to change it to an `Oberservable` and do the `===` in a `.map()` in the component code? — Fredrik Lundin, Feb 21 '17 at 17:22
If you can do `this.mapToolBarMode.subscribe`, then your binding should probably be `` (without `$`) — Günter Zöchbauer, Feb 21 '17 at 17:29
"the value not being available in the constructor". Values from async request are definitely not yet available in the constructor, that's the nature of async. — Günter Zöchbauer, Feb 21 '17 at 17:30

slaesh · Accepted Answer · 2017-02-21T17:35:19.113

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

How to bind ngclass to an observable value

1 Answers1