angular2 property to attribute binding

ProgressBar-App.js

// parent & app
import {ComponentAnnotation as Component, ViewAnnotation as View, bootstrap, formDirectives} from 'angular2/angular2';
import {ProgressBar} from 'progress-bar';

@Component({
    selector: 'demo-app'
})
@View({
    directives: [ProgressBar, formDirectives],
    template: `
        <form>
            <input [(ng-model)]="percentageVal" />
        </form>

        <progress-bar [percentage]="percentageVal">Loading...</progress-bar>
    `
})
export class DemoApp {
    percentageVal: number = 20;
}

bootstrap(DemoApp);

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// child
// works with 2.0.0-alpha.30
import {ComponentAnnotation as Component, ViewAnnotation as View, ElementRef, onChange} from 'angular2/angular2';
import {DOM} from 'angular2/src/dom/dom_adapter';

@Component({
    selector: 'progress-bar',
    properties: [
    	'percentage'
    ],
    lifecycle: [onChange]
})
@View({
    template: `
    	<div class="all">
    		<div class="progress"></div>
    		<span class="label">{{percentage}}</span>
    	</div>
    `
})
export class ProgressBar {
    percentage: number = 23;
    constructor(element:ElementRef){
    	this.progressElement = DOM.querySelector(element.nativeElement, '.progress');
    }
    onChange(changes){
    	if(changes['percentage']){
    		DOM.setAttribute(this.progressElement, "style", `width: ${this.percentage}%`);
    	}
    }
}