Angular 2 with eventemiiter doesnot work -

i using angular 2 develop ecommerce app.

i tried event emitter because add product cart , display count value in cart icon.

here home component.

import { component, oninit,eventemitter,output } '@angular/core'; export class homecomponent implements oninit {   badge;   @output() change: eventemitter<any> = new eventemitter();       addtocart(deal, value) {       this.badge=1;       this.change.emit(this.badge);      } } 

when click addtocart button.i emit badge value.

here menubar component.ts

  import { component, oninit,input } '@angular/core'; export class menubarcomponent implements oninit {  badge:any;  change1(user)     {       this.badge=user;       console.log("called",this.badge);     }  } 

here menubar.html

<span (change)="change1($event)">{{badge}}</span> 

here home component.html.

<div class="col-sm-4 col-md-3" *ngfor="let deals of deals; let = index;">                         <div class=" deals-blk" *ngif="i < 4">                                                             <a href="deals-details.html"><img src="http://35.154.116.133/crackerdeals/deals/{{deals.d_images[0].url}}" alt="deals"></a>                              <div class="deals-blk-details clearfix">                                               <h3>{{deals.d_name}}</h3>                                 <p class="short-desc">for duration of 2hours , budget of 3k</p>                                 <p class="net-val">net value: {{settings.default_currency_symbol}} {{deals.d_sale_price}}</p>                                 <p class="prod-val">{{settings.default_currency_symbol}} {{deals.d_regular_price}} + {{deals.d_tax[0].percentage}}% gst</p>                                 <div class="row clearfix">                                     <div class="col-sm-3 selectbox">                                             <select  name="" id="" #sval>                                             <option *ngfor="let select of selectval" value="{{select.value}}" [selected]="select.value === '1'">{{select.value}}</option>                                         </select>                                     </div>                                      <div class="col-sm-9">                                                                <button class="col-sm-8" (click)="addtocart(deals,sval.value)">add cart</button>                                     </div>                                 </div>                             </div>                         </div>                     </div> 

actually using ngfor display list of product.

sval.value count value.`deals` product. 

but not display badge value how can this?

kindly advice me,

thanks

import { component, oninit,eventemitter,output } '@angular/core'; export class homecomponent implements oninit {   badge : number = null;   @output() badgetchanged = new eventemitter();      addtocart(deal, value) {       this.badge = 1;       this.badgetchanged.emit(this.badge);      } } 

html :

<span (badgetchanged)="badgetchanged($event)">{{badge}}</span> 

other ts :

badgetchanged(event : number) : void {   this.badge = event; }