title: Angular2 observable change detection template update
body: <p>For performance reasons, I am trying to set up manual change detection on my components.</p>
  
  <p>The structure of the app: App -> Book(s) -> Page(s)</p>
  
  <p>I subscribe to an observable in the AppComponent, I then run the "markForCheck" method of the ChangeDetectorRef.</p>
  
  <p>This seems to trigger the ngAfterContentChecked method in the BookComponent (the child of the component I marked for update).</p>
  
  <p>This made me believe that "markForCheck" in a parent component also updates all the children.</p>
  
  <p>However, even though ngAfterContentChecked is executed in the child (BookComponent), the template of this component doesn't update!</p>
  
  <p>Am I supposed to listen to the observable in every child (sometimes several levels deep in the component hierarchy)? Or did I do something wrong? And why does ngAfterContentChecked execute in the child components even though the template doesn't update?</p>
  
  <p>Some of the relevant code.</p>
  
  <pre><code>@Component({
      selector: 'app',
      directives: [BookComponent],
      changeDetection: ChangeDetectionStrategy.OnPush,
      template: `
          &lt;book *ngIf="_book" [book]="_book" [style.height]="_availableDimensions.height+'px'" (window:resize)="onResize($event)"&gt;&lt;/book&gt;
          &lt;footer id="footer"&gt;&lt;/footer&gt;
      `
  })
  
  export class PlayerComponent {
      ngOnInit() {
          this.initScale();
      }
  
  initScale(){
          this._playerService.availableDimensions$.subscribe(
              availableDimensions =&gt; {
                  // set local availableDimensions variable
                  this._availableDimensions = availableDimensions;
                  this._cd.markForCheck();
              }
          );
      }
  }
  
  
  
  @Component({
      selector: 'book',
      directives: [PageComponent],
      changeDetection: ChangeDetectionStrategy.OnPush,
      template: `
          &lt;div id="pageScrollZone"&gt;
              &lt;div id="pageHolder" [ngStyle]="pageHolderStyles()"&gt;&lt;/div&gt;
          &lt;/div&gt;
      `
  })
  
  export class BookComponent {
      constructor(
              private _cd: ChangeDetectorRef,
              private _playerService: PlayerService,
              private _config: Config
      ){}
  
      ngAfterContentChecked(){
  // This part does execute when the observable changes
          let date = new Date();
          console.log('BOOK: '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds());
      }
  
      pageHolderStyles(){
  // This part does NOT execute when the observable changes
          let styles = {
              marginTop: this._currentMargin.y+'px',
              transform: 'scale('+ (this._baseZoom * this._currentZoomLevel) +')'
          }
  
          return styles;
      }
  }
  </code></pre>