🅰️

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

2021/07/04に公開

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

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!)";
  }
}

<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 要素の属性・プロパティの書き方を使い分けよう

Discussion