title: How to correctly refresh template of component in Angular?
body: <p>I’m using service with observer subscribing. Here is my InterfaceService:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Subject } from 'rxjs/Subject';
  
  @Injectable()
  export class InterfaceService {
    private contentFlag = new Subject();
  
    public getContent(): any {
      return this.contentFlag;
    }
  
    public change(): void {    
      this.contentFlag.next(true);  
    }
  }
  </code></pre>
  
  <p>Here is my Component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { InterfaceService } from '../../-services/interface.service';
  
  @Component({
    selector: 'app-main-content',
    template: `&lt;div *ngIf="showContent"&gt; My Content &lt;/div&gt;`  // why it is always hidden ?
  })
  
  export class MainContentComponent implements OnInit {
    private content$: any;
    public showContent = false;
  
    constructor(private interfaceService: InterfaceService) {}
  
    ngOnInit() {
      this.content$ = this.interfaceService.getContent();
  
      this.content$.subscribe(function(data) {
        this.showContent = data;      
        console.log('Here comes true:', data); // it works - here shows true
      });
    }
  }
  </code></pre>
  
  <p>When other component makes interfaceService.change(), I get ‘true’ in console. </p>
  
  <p>But there is no reaction in Component template. <code>&lt;div *ngIf="showContent"&gt; My Content &lt;/div&gt;</code> is always hidden. </p>
  
  <p>What am I doing wrong? Should I refresh template in subscription? How? Or is there a problem with architecture?</p>