title: Angular 2 view not updating after model change
body: <p>Can't get my view to update even though my model clearly is updated. Tried using NgZone but it doesn't help.</p>
  
  <p>I'm injecting RouteService in two components: app.component and start-page-list.component.
  RoutService is using Subject to pass data between components:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Round } from "app/round";
  import { Subject } from "rxjs/Subject";
  
  @Injectable()
  export class RoundService {
  
    private roundSource = new Subject&lt;Round&gt;();
  
    roundItem$ = this.roundSource.asObservable();
  
    changeRound(value:Round) {
      this.roundSource.next(value);
    }
  }
  </code></pre>
  
  <p>app.components view gets updated as expected but start-page-list.component does not.</p>
  
  <p>app.component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Http } from "@angular/http";
  import 'rxjs/add/operator/toPromise';
  import { RoundService } from "app/round.service";
  import { Round } from "app/round";
  
  @Component({
    selector: 'app-root',
    template: `
    &lt;div class="container"&gt;
    &lt;div class="page-header"&gt;
      &lt;h1&gt;{{currentRound.id}}&lt;/h1&gt;
    &lt;/div&gt;  
    &lt;/div&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    styleUrls: []
  })
  export class AppComponent {
    currentRound: Round = {id:0,name:"No round set yet"};
  
    constructor(private http: Http, private round : RoundService) { }
  
    callBackFunc(data:Round) {
      this.currentRound = data;
    }
  
    ngOnInit() {
      this.round.roundItem$.subscribe(
        (data:Round) =&gt; this.callBackFunc(data)
      );
    }  
  }
  </code></pre>
  
  <p>Here currentRound.id is updated!</p>
  
  <p>start-page-list.component (rendered at the router-outlet in app.component):</p>
  
  <pre><code>import { Component, OnInit, Input, NgZone } from '@angular/core';
  import { PlayerService } from "app/player.service";
  import { Game } from "app/game";
  import { Player } from "app/player";
  import { GameService } from "app/game.service";
  import { RoundService } from "app/round.service";
  import { Round } from "app/round";
  import 'rxjs/add/operator/toPromise';
  
  @Component({
    selector: 'app-start-page-list',
    template: `{{currentGameset.id}}`,
    styleUrls: []
  })
  export class StartPageListComponent implements OnInit {
  
    currentGameset:Round = {id:0,name:'No round set yet'};
  
    constructor(private gameService: GameService, private roundService: RoundService, private zone: NgZone) { }
  
    callbackFunc(data:Round) {
      this.currentGameset = data;
      console.log("currentGameset.id= " + this.currentGameset.id);
    }
  
    ngOnInit() {
      this.roundService.roundItem$.subscribe(
        (data:Round) =&gt; this.zone.run( () =&gt; this.callbackFunc(data) )
      );
    }  
  
  }
  </code></pre>
  
  <p>Here currentGameset.id is not updated even though  the model is (console log shows updated value). As you can see I've tried using NgZone.</p>
  
  <p>Any suggestions what might be wrong here?</p>
  
  <p><strong>Edit</strong>
  If i put the start-page-list.component as a child component to the app.component i don't get the problem. Then the view gets updated as I expect. The problem seems to be only when I use the router-outlet rendering of the component.</p>