angular - Angular2 service emitter subscribe fail -

referring global events in angular 2 trying implement cart service emits event when new item added cart. subscribe service event in component called navbar (which not child of cart) show number of cart items etc.

my cart service:

export class cartservice {     public itemadded$: eventemitter<any>;     ...      constructor(private http: http){          this.itemadded$ = new eventemitter();         this.cart=[];     }      addtocart(id: any): {          this.itemadded$.emit(id);          return this.http.get(  this.myurl + 'add' + '/' + id + '/', { withcredentials:true})         .topromise()         .then(response => response.json())      }   ...   ... }  

my navbar component:

@component({ directives:[router_directives, cart], providers:[cartservice],  }) export class navbar implements oninit{      ...     totalcost: any;     cartitemcount : any;     addeditem: any;      constructor(private cartservice: cartservice){          this.cartservice.itemadded$.subscribe( (id: any) => {             alert(id);             this.onitemadded(id);             this.fetchcartelements();         });     }       private onitemadded(item: any): void {         // added item         this.addeditem = item;     } ... ... } 

however, whenever add item, nothing happens in navbar i.e. alert(id) or onitemadded() not called automatically cartitemcount etc can automatically updated.

what going wrong?

i think error here conception error.

as @mxii said, case fits observable behaviour, shouldn't use promise , event emitter (which called before item added on server side).

solution promise:

in case want fix problem promise, think solution trigger event once got answer only:

    return this.http.get(  this.myurl + 'add' + '/' + id + '/', { withcredentials:true})     .topromise()     .then(response => {                        this.cart.push(response.json());                        this.itemadded$.emit(id);                        }); 

and provide in top-level module (usually appmodule) ensure 1 instance accross aplication.

solution observable:

addtocart(id: any): observable<any> {//don't have item interface type object get?         return this.http.get(  this.myurl + 'add' + '/' + id + '/', { withcredentials:true})         .map(res => res.json());     } 

and on navbar:

@component({ directives:[router_directives, cart] //note removed cartservice, said have provide on appmodule, else you'll have different instances accross application , seems it's not want. }) export class navbar implements oninit{      ...     totalcost: any;     cartitemcount : any;     addeditem: any;      constructor(private cartservice: cartservice){     }       private onitemadded(item: any): void {         // added item         this.addeditem = item;     }      public additemtocart(id:number):void{          //i guess you're adding item button click, button should call method, passing id of item parameter.         this.cartservice.addtocart(id).subscribe(this.onitemadded);     } ... ... }