title: angular 2 subscribe value change not reflecting on html
body: <p>This is quite confusing to me. I might not have a solid understanding of how subscription works.</p>
  
  <p>Angular 2 finalized version</p>
  
  <p>Goal: Hide/Show navigation menu based on roles
  Approach: I use Facebook to authenticate users. After authentication, user roles will be retrieved and used to determine if Admin menu should be displayed. A observable.next call is made with true and the nav bar compoenent subscription will pick up the flag and change the isAdmin to true.(isAdmin is false to begin with) That shall allow the Admin menu to be displayed.</p>
  
  <p>Problem: The true flag is properly picked up by the subscriber and the isAdmin is set to true. However, the Admin menu doesn't show up.</p>
  
  <p>navbar.component.ts</p>
  
  <pre><code>@Component({
  selector: 'as-navbar',
  templateUrl: 'app/shared/navbar/navbar.html',
  changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class NavbarComponent {
  @Input() brand: string;
  public isAdmin:boolean;
  
  constructor(private _securityService:SecurityService){
      let self = this;
  
      this._securityService.isAdminObservable.subscribe(function (flag) {
          this.isAdmin = flag;
          console.log('subscribe received on navbar');
      }.bind(this));
   }
  }
  </code></pre>
  
  <p>navbar.html</p>
  
  <pre><code>        &lt;li class="dropdown" *ngIf="isAdmin"&gt;
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Admin&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a [routerLink]="['/campaigns']"&gt;Campaigns&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a [routerLink]="['/products']"&gt;Products&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a [routerLink]="['/products']"&gt;Reports&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>    constructor(private _http: Http, private _jsonp: Jsonp, private _securityService:SecurityService) {
      this.appBrand = CONSTANTS.MAIN.APP.BRAND;
  
      let self = this;
      setInterval(function(){
          self._securityService.setAdminStatus(true);
          console.log('set from app component');
      }, 5000)
  }
  </code></pre>
  
  <p>security.service.ts</p>
  
  <pre><code>@Injectable()
  export class SecurityService{
  public isAdmin:Subject&lt;boolean&gt;=new Subject&lt;boolean&gt;();
  public isAdminObservable = this.isAdmin.asObservable();
  
  constructor(){}
  
  setAdminStatus(flag){
      this.isAdmin.next(flag);
      }
  }
  </code></pre>
  
  <p>Is there something wrong with this? Or there are better approach to achieve the goal?
  Any suggestion will be greatly appreciated!
  Thanks</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>With the answer provided by peeskillet, I removed the changeDetection line from the component and it works. </p>
  
  <p>However, when I further work on the code, I move </p>
  
  <pre><code>self._securityService.setAdminStatus(isAdmin);
  </code></pre>
  
  <p>to another service (Facebook service in this case) and call that service from app  component. The subscribe in navbar.compoenent.ts does pick up the change but didn't trigger change detection. I have to manually trigger the detection to make it work. </p>
  
  <p>updated navbar.component.ts</p>
  
  <pre><code>@Component({
  selector: 'as-navbar',
  templateUrl: 'app/shared/navbar/navbar.html'
  })
  export class NavbarComponent {
  @Input() brand: string;
  public isAdmin:boolean=false;
  
  constructor(private _securityService:SecurityService, private cdr: ChangeDetectorRef){
      this._securityService.isAdminObservable.subscribe(function (flag) {
              this.isAdmin = flag;
              this.cdr.detectChanges();
              console.log('subscribe received on navbar');
          }.bind(this));
      }
  }
  </code></pre>
  
  <p>updated app.component.ts</p>
  
  <pre><code>@Component({
      selector: 'as-main-app',
      templateUrl: 'app/app.html'
  })
  export class AppComponent {
      public appBrand: string;
      constructor(private _http: Http,
              private _facebookService:FacebookService
  ) {
          this.appBrand = CONSTANTS.MAIN.APP.BRAND;
          this._facebookService.GetLoginStatus();
      }
  }
  </code></pre>
  
  <p>This is fairly interesting. Apparently, I need to learn more about angular 2 change detection. If anyone knows a good reference, please share with me. </p>
  
  <p>Thank you!!</p>