Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
angular2 property to attribute binding
// 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}%`);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment