Angularで遊ぶ(2) - データバインディング - 属性バインディングとクラス・スタイルバインディング

app.component.htmlはこんな感じ

<!-- 属性バインディングの例 -->
<table border="1">
  <tr><td [attr.rowspan]="len">結合</td><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
</table>

<!-- クラスバインディング, スタイルバインディングの例 -->
<div 
  class="line back" 
  [class.fore]="clazz"
  [style.text-align]="align"
  [style.font-size.%]="fsize">スタイル適応されるかなー？</div>

app.component.tsはこんな感じ

export class AppComponent {
  len = "3";
  clazz = true;
  align = "right";
  fsize = 200;
}

こんなHTMLになる

<table _ngcontent-c0="" border="1"><tbody _ngcontent-c0="">
    <tr _ngcontent-c0="">
        <td _ngcontent-c0="" rowspan="3">結合</td>
        <td _ngcontent-c0="">1</td>
    </tr>
    <tr _ngcontent-c0="">
        <td _ngcontent-c0="">2</td>
    </tr>
    <tr _ngcontent-c0="">
        <td _ngcontent-c0="">3</td>
    </tr>
</tbody></table>

<div 
    _ngcontent-c0="" 
    class="line back fore"
    style="text-align: right; font-size: 200%;"
>スタイル適応されるかなー？</div>

いろいろと興味深いけど、見比べるとわかるよね。