Angular2バインド属性値

Question

Angular2双方向データバインディング と同様に、親コンポーネントと子コンポーネントがあります。親では、プロパティを介して子コンポーネントに渡される値を変更します。子のプロパティの名前はpercentageです。

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

プロパティ値をhtml属性値にバインドしたい。いいね：<div style = "width：{{percentage}}％">。動作する構文は見つかりませんでした。そのため、手動でDOM更新を行う変更リスナーを使用することになりました。

this.progressElement = DOM.querySelector(element.nativeElement, '.progress');
DOM.setAttribute(this.progressElement, "style", `width: ${this.percentage}%`);

これを達成するためのよりエレガントな方法はありますか？

Answer 1

CSSプロパティにはpercentage bindingを使用できます：[style.width.%]

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'progress-bar',
    template: `
        <div class="progress-bar">
            <div [style.width.%]="value"> {{ value }}% </div>
        </div>
    `,
})
export class ProgressBar {
    @Input() private value: number;
}