data binding - Angular2 Bind Attribute Value -

similar angular2 two-way data binding, have parent , child component. in parent change value passed child component via property. property of child named percentage.

https://gist.github.com/ideadapt/59c96d01bacbf3222096

i want bind property value html attribute value. like: <div style="width: {{percentage}}%">. didn't find syntax worked. ended using change listener manual dom update:

this.progresselement = dom.queryselector(element.nativeelement, '.progress'); dom.setattribute(this.progresselement, "style", `width: ${this.percentage}%`); 

is there more elegant way accomplish this?

use ngstyle, works similar angular 1. since alpha-30, ngstyle available in angular2/directives:

import {ngstyle} 'angular2/directives'; 

then include ngstyle in directives list, should work (here examples):

@view({     directives: [ngstyle]     template: `         <div class="all">             <div class="progress" [ng-style]="{'width': percentage + '%'}"></div>             <span class="label">{{percentage}}</span>         </div>     ` }) 

alternatively , without using ngstyle, work too:

<div class="progress" [style.width]="percentage + '%'"></div>