title: Angular 4 .subscribe not updating UI
body: <p>Here is the typescript function I wrote:</p>
  
  <pre><code>public fetchSubject() {
   this.loading.joinBtn = true;
   this.apiService.get('classroom_details?class_code=' + this.code)
   .subscribe((res) =&gt; {
    console.log('API request successful');
    this.loading.joinBtn = false;
    this.modalDiv = 'class';
    console.log('Button state is: ', this.loading.joinBtn, '. Display: ', this.modalDiv);
    }, error =&gt; {
    console.log('API Request Failed');
    this.loading.joinBtn = false;
    });
  }
  </code></pre>
  
  <p>The function seems to work perfectly as I get the desired values in console.log. However, it's not updating the UI. Neither of the two changes i.e. <code>this.loading.joinBtn</code> and <code>this.modalDiv</code> reflect on the UI.</p>
  
  <p>When I move the modalDiv change line outside apiService, something like:</p>
  
  <pre><code>public fetchSubject() {
  this.loading.joinBtn = true;
  this.modalDiv = 'class';
  this.apiService.get('classroom_details?class_code=' + this.code).......
  </code></pre>
  
  <p>The UI is updated. However, I would like to update the UI only after API request is completed. What seems to be the problem here?</p>