title: Angular 4: Change Detection between component and service
body: <p>I am currently working on a small test project with <code>Ionic/Angular</code>,
  Before I post the snippets: the problem I have is that I want to send value changes from inside a service <code>(@Injectable)</code> to a <code>component</code> to track it's changes. I have tried EventEmitter and OnChanges, but to no avail..</p>
  
  <p>I have a progressbar that needs a certain value to advance in progress. This is the progressbar:
  <strong>TS:</strong></p>
  
  <pre><code>import {Component, Input} from '@angular/core';
  
  
  @Component({
    selector: 'progressbar',
    templateUrl: 'progressbar.html'
  })
  export class ProgressBarComponent {
  
    @Input('progress') progress;
  
    constructor() {}
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="progress-outer"&gt;
      &lt;div class="progress-inner" [style.width]="progress + '%'"&gt;
          {‌{progress}}%
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(credit to JoshMorony)
  The bar's width attribute is connected to the progress, thus enabling it to advance e.g. by percentage.</p>
  
  <p>Now comes the problem:</p>
  
  <p>I injected the progressbar into a normal component, but the calculation for the advancement happens in a different service, an Injectable. I am only able to send a single value, but not the advancement of the calculation and as such the bar itself:</p>
  
  <p><strong>home.ts</strong></p>
  
  <pre><code>showProgressBar: boolean;
  // this variable must always have a value between 0 - 100
  loadProgress;
  
  triggerEvent(){
  this.service.showProgressbar = true;
  }
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;progressbar [progress]="loadProgress"&gt;&lt;/progressbar&gt;
  </code></pre>
  
  <p>What is done here is simply a call to trigger an event, that includes the logic for that progressBar. By setting service'sshowProgressbar to true, I am indirectly setting the pages showprogressbar to true as well.</p>
  
  <p>Note: the boolean is not used yet</p>
  
  <p>Service looks like this:</p>
  
  <pre><code>denominator: number = 0;
  counter: number = 0;
  showProgressbar = false;
  
  result: number = 0;
  calculateProgress() {
    if (this.showProgressbar = true) {
      let percentage = Math.round((this.counter / this.denominator) * 100);
      this.result = percentage;
      if (this.result == 100) {
        setTimeout(this.showProgressbar = false, 500);
      }
    } else {
      this.counter = 0;
      this.denominator = 0;
      this.result = 0;
    }
  }
  </code></pre>
  
  <p>I checked the calls, result here DOES calculate correctly, but it does not transfer to home.ts unfortunately. If I statically change result to a random number like 50 or so, it will indeed change the bar.</p>
  
  <p>How can I make <code>home.ts</code> "watch" the value of result constantly or in another way how do I implement the change detection for that result value here?</p>
  
  <p>THANKS! </p>