title: Angular2 component view not updating when variable changes
body: <p>I have a simple component that just renders a progress bar.</p>
  
  <p>It initializes fine and the progress passes over to it just fine, but the template is not updating with the new values.</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
    selector : 'progress-bar',
    template : `
      &lt;div class="progress-container"&gt;
        &lt;div&gt;{{currentProgress}}&lt;/div&gt;
        &lt;div [style.width.%]="currentProgress" class="progress"&gt;&lt;/div&gt;
      &lt;/div&gt;
    `,
    styles: [
      '.progress-container {width: 100%; height: 5px}',
      '.progress {background-color: #8BC34A; height:5px}'
    ]
  })
  
  export class ProgressBar {
    currentProgress: number;
  
    constructor() {
      this.currentProgress = 0;
    }
  
    onProgress(progress: number) {
      console.log(progress) //consoles correct percentages
      this.currentProgress = progress;
    }
  
    reset() {
      console.log(this.currentProgress) //is 100
      this.currentProgress = 0;
    }
  }
  ~
  </code></pre>
  
  <p>Elsewhere</p>
  
  <pre><code>  ngOnInit() {
      this.httpFileService.progress$.subscribe((progress: number) =&gt; this.onProgress(progress));
    }
  
    onProgress(progress: number) {
      this.progressBar.onProgress(progress*100);
    }
  </code></pre>
  
  <p>I feel like I am missing something very remedial.</p>