title: How to bind ngclass to an observable value
body: <p>Is binding to an <code>Observable&lt;enum&gt;</code> possible like this in Angular?</p>
  
  <pre><code>&lt;a [ngClass]="{selected: (mapToolBarMode$ | async) === 0 }" /&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;a [ngClass]="{selected: (mapToolBarMode$ | async) === MapMode.Pan }" /&gt;
  </code></pre>
  
  <p>where <code>mapToolBarMode$</code> is the observable</p>
  
  <p>It doesnt seem to do anything as the observable mutates.</p>
  
  <p>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:</p>
  
  <pre><code>private mapModes: typeof MapMode = MapMode;
  private isPanSelected = true;
  ngOnInit() {
      this.mapToolBarMode.subscribe(v =&gt; {
          this.isPanSelected = (v === this.mapModes.Pan);
      })
  }
  </code></pre>
  
  <p>...</p>
  
  <pre><code>[ngClass]="{selected: isPanSelected }"
  </code></pre>
  
  <p><strong>Update</strong>
  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 </p>