title: Angular 5 HTML not updating after variable change
body: <p>I'm having a strange issue where my HTML page isn't updating when the angular component variable changes.  After pressing a button I do a network load and start playing audio like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>onPreviewPressed(media: Media): void {
      if (this.playing) {
          this.playing = false;
          this.source.stop();
      }
  
      this.loading = true;
  
      this.service.downloadAudio(this.gender, this.style, this.ageRange, media).subscribe(abuf =&gt; {
          this.context.decodeAudioData(abuf, buffer =&gt; {
              this.source.buffer = buffer;
              this.playing = true;
              console.info(`Playing is ${this.playing}`);
              this.source.start(0);
          }, y =&gt; {
              console.info('Error: ' + y);
          });
          this.loading = false;
      }, () =&gt; {
          this.loading = false;
      });
  }
  </code></pre>
  
  <p>And then on my HTML I have this snippet:</p>
  
  <pre><code>Playing is {{ playing }}
  &lt;button [hidden]="!playing" style="width: 44px; height: 44px" (click)="onStopPressed()"&gt;
      &lt;img src="/assets/stop.png" alt="Stop"&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>When I click the button the audio properly downloads and starts playing, and in the console I see it say <code>Playing is true</code> but the HTML continues to say false, and doesn't show the button.</p>
  
  <p>I thought it might be an issue of <code>this</code> not really being the component but the window variable, but if that were the case then the audio would really be able to play either as the <code>source</code> variable is part of the component.</p>