angularjs - Component template expression not updating -

in main view inject component, on initial load shows correct integer, if update value later on in main view console log message attached function displays correct integer actual html value not update. whats going on here?

main.js:

@component({     selector: 'step-one',     directives: [pricebox],     templateurl: 'step-one/step-one.html' })  export class stepone {      constructor(@inject(router) router, @inject(http) http, @inject(routeparams) params, @inject(pricebox) pbox) {         let cid = parseint(params.get('country'));          pbox.price = 200;          ... 

price-box.js

import {component} 'angular2/core';  @component({     selector: 'price-box',     template: `         <div>             <h1>pricebox</h1>             <p>{{totalprice}}</p>         </div>         ` })  export class pricebox {     constructor() {         this.totalprice = '130';     }      set price(val){         this.totalprice = val;         console.log('set price box: price = ' + this.totalprice);     } } 

so reiterate: on load of page price box element shows price being 130... when try , set new value via pbox.price = 200 the value stays @ 130 console log message saying set price box: price = 200

thanks!

the way inject child component (pricebox) parent 1 bit strange.

if want reference component within parent one, should leverage viewchild decorator:

@component({   selector: 'somedir',   templateurl: 'sometemplate',   directives: [itemdirective] }) class stepone {   @viewchild(itemdirective) viewchild:pricebox;   ngafterviewinit() {     // viewchild set   } 

}

i use interpolation provide price pricebox component. latter defines input parameter:

@component({   selector: 'price-box',   template: `       <div>           <h1>pricebox</h1>           <p>{{totalprice}}</p>       </div>       ` }) export class pricebox {   @input('val') totalprice = '130'; } 

you can use parent component:

@component({   selector: 'price-box',   template: `     <price-box [val]="price"></price-box>   ` }) export class stepone {   price = '200'; } 

you can notice can leverage 2 way binding custom component. need add corresponding event:

@component({   selector: 'price-box',   template: `       <div>           <h1>pricebox</h1>           <p>{{totalprice}}</p>       </div>       ` }) export class pricebox {   @input('val') totalprice = '130';   @output('valchanged') totalpricechanged:eventemitter;    constructor() {     this.totalpricechanged:eventemitter = new eventemitter();   }    updatetotalprice() {     this.totalpricechanged.emit(this.totalprice);   } } 

and in parent component:

@component({   selector: 'price-box',   template: `     <price-box [(val)]="price"></price-box>   ` }) export class stepone {   price = '200'; } 

hope helps you, thierry