Configuring components to use explicit change detection with OnPush

The convention of Angular's data flow, in which data flows downward through the component tree and events float upwards, engenders some interesting possibilities. One of these involves controlling when Angular should perform change detection at a given node in the component tree.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/4909/.

Getting ready

Begin with the following simple application:

[app/root.component.ts] 
 
import {Component} from '@angular/core'; 
import {Subject} from 'rxjs/Subject'; 
import {Observable} from 'rxjs/Observable'; 
 
@Component({ 
  selector: 'root', 
  template: ` 
   <button (click)="shareSubject.next($event)">Share!</button> 
   <article [shares]="shareEmitter"></article> 
  ` 
}) 
export class RootComponent  { 
  shareSubject:Subject<Event...