Angular2 observable change detection template update
<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>