Implementing a Publish-Subscribe model using Subjects

Angular 2 will often provide you with an Observable interface to attach to for free, but it is important to know how they are created, configured, and used. More specifically, it is valuable for you to know how to take Observables and apply them to real scenarios that will be encountered in the client.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/4839/.

Getting ready

Suppose you started with the following skeleton application:

[app/click-observer.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'click-observer', 
  template: ` 
   <button> 
     Emit event! 
   </button> 
   <p *ngFor="let click of clicks; let i = index"> 
     {{i}}: {{click}} 
   </p> 
  ` 
}) 
export class ClickObserverComponent { 
  clicks:Array<Event> = []; 
} 
...