Angular 2 subscribe not executing -

plunkr: https://plnkr.co/edit/arrowxsfyrasbeazciyf?p=preview

i'm trying subscribe observer can't work. subscribe method never activated reason, notifyaboutchange runs , correct id passed after calling next subscribe method doesn't seem pick on being called.

the service contains observer:

import {injectable} '@angular/core'; import {subject} 'rxjs/subject';  @injectable()  export class apiservice {   public notifier = new subject();   public changeoccurrence$ = this.notifier.asobservable();    constructor() {}    notifyaboutchange(id: string) {     this.notifier.next(id);   } } 

directive calls notifyaboutchange method:

constructor(private _elementref: elementref, private _renderer: renderer, private _api: apiservice) {    this.eventhandler = _renderer.listen(_elementref.nativeelement, ('ontouchstart' in window ? 'touchend' : 'click'), (e) => {      this.isallchecked = !this.isallchecked;      (let checkbox of this.checkboxes) {        if (!checkbox.isdisabled) {         checkbox.ischecked = this.isallchecked;       }     }      _api.notifyaboutchange(this.componentid);   }); } 

component should subscribe:

export class formcheckboxmultiplecomponent implements oninit, docheck {   @input() model: array<any>;   @input() checkboxes: array<any>;   @output('modelchange') onmodelchange: eventemitter<any> = new eventemitter();   @output() callback: eventemitter<any> = new eventemitter();    constructor(private _globals: globalvariablesservice, private _differs: iterablediffers, private _api: apiservice) {     this.ns = _globals.ns;     this.differ = _differs.find([]).create(null);      _api.changeoccurrence$.subscribe(       componentid => {         console.log(componentid);         if (this.componentid === componentid) {            (let checkbox of this.checkboxes) {              let existingindex = this.findindex(checkbox, this.model);              if (existingindex === -1) {               this.model.push(checkbox);             }             else {               this.model.splice(existingindex, 1);             }           }         }       }     )   }    .... excluded parts .... } 

i think because don't share same instance of service. define corresponding provider when bootstrapping application:

bootstrap(appcomponent, [ apiservice ]); 

don't forget remove service providers attribute of components / directives.

note can restrict scope of service if necessary. example defining in component contains / uses both component , directive.

see plunkr: https://plnkr.co/edit/lggnq5hpqfzcqfgl0tpw?p=preview.