title: In Angular 2 how does a component view get updated via a service
body: <p>I am new to Angular2 and am struggling to get a component view to update via a service.  </p>
  
  <p>I want two different page types within my application.  One that shows a header with a small logo, and another that doesn't show a header and has a bigger logo.   </p>
  
  <p>I have an app-header component directly under the root app component.  The app-header component checks an array in the service and uses *ngIf to change what it is showing.  I am attaching to route changes so it checks on NavigationStart and updates the value accordingly using a service. </p>
  
  <p>If I hit refresh the view displays correctly, but if I change routes within the application the view app-header component does not update.  When I console.log the values I see that the service values and the component class attributes are changing correctly, but within the component view nothing is getting updated.  I though maybe I had multiple instances of the service, but I added a random number on the service to check and it's all the same instance.  </p>
  
  <p>Here is the Template service:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import 'rxjs/add/observable/merge';
  import 'rxjs/add/operator/switchMap';
  
  import { Injectable } from '@angular/core';
  import { Template } from './template'
  
  //HANDLE TEMPLATES IN AN ORGANIZED WAY
  @Injectable()
  export class TemplateService  {
  
      template: Template = {
          showHeader: true,
          imagePath: "",
          name: Math.random()
      };
  
      public setShowHeader(value:boolean){
          this.template.showHeader = value;
          console.log(value, this.template.showHeader);//CHECK TO MAKE SURE VALUES MATCH
          console.log("name", this.template.name);//CHECK TO MAKE SURE SAME INSTANCE
      }
  
      //ALLOW BACKGROUND TO BE MANUALLY SET IF DESIRED - NOT USED FOR NOW
      public setImage(url){
          this.template.imagePath = url;
      }
  
      //WHEREVER A ROUTE IS DEFINED A PAGE CAN CALL THIS SERVICE AND ADD SPECIFY AS THIS TEMPLATE
      public noHeadRoutes = [];
  
      public setRandomImage(){
          this.template.imagePath = this.availableImagePaths[Math.floor(Math.random() * this.availableImagePaths.length)];
      }
  
      //USE THESE IF NO MANUAL IMAGE IS SET
      private availableImagePaths:[string] = [
          "images/home/globe.jpg",
          "images/home/typing.jpg"
      ];
  
      constructor() {
          this.setRandomImage();
      }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the app-header component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
  import { Router, NavigationStart } from '@angular/router';
  import { TemplateService, Template } from '../services/template';
  
  @Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'app-header',
    styles: [
      require('./app-header.scss')
    ],
    template: `
      {{ [(template.showHeader)] }} -- {{ template.name }}
      &lt;header class="header" *ngIf="template.showHeader"&gt;
        &lt;nav class="navbar navbar-fixed-top bg-inverse navbar-dark"&gt;
          &lt;a class="navbar-brand" Routerlink="/" RouterLinkActive="/"&gt;
              &lt;img src="../../images/logo.svg" class="app-logo" /&gt;
          &lt;/a&gt;
          
          &lt;ul class="nav navbar-nav pull-right"&gt;
              &lt;li class="nav-item" *ngIf="authenticated"&gt;
                  &lt;a class="nav-link" (click)="signOut.emit()" href="#"&gt;
                      Sign out
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item" *ngIf="!authenticated"&gt;
                  &lt;a class="nav-link" Routerlink="/login" RouterLinkActive="active"&gt;
                      Login
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          
        &lt;/nav&gt;
      &lt;/header&gt;
      
      &lt;!-- PUT IN A BACKGROUND IMAGE AND ADJUST SPACING --&gt;
      &lt;div *ngIf="!template.showHeader"&gt;
          &lt;style type="text/css"&gt;
              .hey{font-size:10px;}
              
          &lt;/style&gt;
          &lt;div class="big-logo"&gt;
              &lt;img src="images/logo.svg" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    `
  })
  
  export class AppHeaderComponent implements OnInit{
  
    @Input() authenticated: boolean;
    @Output() signOut = new EventEmitter(false);
    template: Template;
  
    constructor(private _router: Router, private _ts: TemplateService) {
  
      this.template = _ts.template;
  
    }
  
    ngOnInit(){
      //ALL VIEWS CAN SET A NO HEAD TEMPLATE IF NEEDED. THIS CHECKS AT NAVIGATION START AND SETS THE HEADER
      this._router.events.subscribe( (event) =&gt;{
  
        if(event instanceof NavigationStart) {
  
          if(this._ts.noHeadRoutes.includes(event.url)){
            this._ts.setShowHeader(false);
          }
  
          else{
            this._ts.setShowHeader(true);
          }
  
        }
  
      });
  
    }
  
  }</code></pre>
  </div>
  </div>
  </p>