Angular 2で<button disabled="">にバインドするときの書き方

gistfile1.txt

2016/04/06 にQiitaに投稿した記事のアーカイブです

---

@armorik83です。雑ですが業務メモを共有しておきます。

```ts
import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <button [attr.disabled]="false">aaa</button>
    <button [attr.disabled]="null">bbb</button>
    <button [disabled]="false">ccc</button>
  `,
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)';
  }
}
```

https://plnkr.co/edit/88OmqnKXTo69hnnIQl5e?p=preview

`<button [attr.disabled]="false">aaa</button>`としてもボタンが押せないので「なんでかなー」と思ったら、`null`を与えればよいそうです。`<button [attr.disabled]="expr ? true : null">bbb</button>`とすれば式で書ける。

これはHTML5で策定されている属性のため`[disabled]`と書かずに`attr.`を付けて`[attr.disabled]`とするべきです。

thx @laco0416 

---

161207追記。こちらの記事が理由について詳しいです。

- [Angular 2でのHTML要素の属性・プロパティの書き方を使い分けよう](http://qiita.com/mstssk/items/0a545382668e00a03314)