詳細ガイド
テンプレート構文

属性バインディング

Angularの属性バインディングを使用すると、属性の値を直接設定できます。 属性バインディングを使用すると、アクセシビリティを向上させ、アプリケーションを動的にスタイル設定し、複数のCSSクラスまたはスタイルを同時に管理できます。

構文

属性バインディングの構文は プロパティバインディング に似ていますが、角括弧で囲まれた要素プロパティの代わりに、属性名の前に attr プレフィックスとドットを付けます。 次に、属性値を文字列に変換される式で設定します。

      
<p [attr.attribute-you-are-targeting]="expression"></p>

HELPFUL: 式が null または undefined に解決されると、Angularは属性を完全に削除します。

ARIA 属性のバインディング

属性バインディングの主なユースケースの1つは、ARIA属性を設定することです。

ARIA属性にバインドするには、次のように入力します。

src/app/app.component.html

      
<h1>Attribute, class, and style bindings</h1>
<h2>Attribute binding</h2>
<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan="{{ 1 + 1 }}">Three-Four</td></tr>
  -->
  <!-- Notice the colSpan property is camel case -->
  <tr><td [colSpan]="1 + 1">Three-Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>
<div>
  <!-- create and set an aria attribute for assistive technology -->
  <button type="button" [attr.aria-label]="actionName">{{ actionName }} with Aria</button>
</div>
<hr />
<h2>Styling precedence</h2>
<h3>Basic specificity</h3>
<!-- The `class.special` binding overrides any value for the `special` class in `classExpression`.  -->
<div [class.special]="isSpecial" [class]="classExpression">Some text.</div>
<!-- The `style.border` binding overrides any value for the `border` property in `styleExpression`.  -->
<div [style.border]="border" [style]="styleExpression">Some text.</div>
<h3>Source specificity</h3>
<!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
<comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding></comp-with-host-binding>
<!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
<div>
  <comp-with-host-binding [style.color]="color" dirWithStyleBinding></comp-with-host-binding>
</div>
<h3>Dynamic vs static</h3>
<!-- If `[class.special]` equals false, this value overrides the `class="special"` below -->
<div class="special" [class.special]="false">Some text.</div>
<!-- If `styleExpression` has a value for the `border` property, this value overrides the `style="border: dotted darkblue 3px"` below -->
<div style="border: dotted darkblue 3px" [style]="styleExpression">Some text.</div>
<div class="readability">
  <comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
</div>
<app-my-input-with-attribute-decorator type="number"></app-my-input-with-attribute-decorator>

colspan へのバインディング

属性バインディングのもう1つの一般的なユースケースは、テーブルの colspan 属性です。 colspan 属性にバインディングすると、テーブルをプログラムで動的に保つことができます。 アプリケーションがテーブルに表示するデータの量に応じて、行がまたがる列の数は変わる可能性があります。

<td> 属性 colspan で属性バインディングを使用するには

  1. 次の構文を使用して colspan 属性を指定します。 [attr.colspan]。
  2. [attr.colspan] を式に等しく設定します。

次の例では、colspan 属性を式 1 + 1 にバインドしています。

src/app/app.component.html

      
<h1>Attribute, class, and style bindings</h1>
<h2>Attribute binding</h2>
<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan="{{ 1 + 1 }}">Three-Four</td></tr>
  -->
  <!-- Notice the colSpan property is camel case -->
  <tr><td [colSpan]="1 + 1">Three-Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>
<div>
  <!-- create and set an aria attribute for assistive technology -->
  <button type="button" [attr.aria-label]="actionName">{{ actionName }} with Aria</button>
</div>
<hr />
<h2>Styling precedence</h2>
<h3>Basic specificity</h3>
<!-- The `class.special` binding overrides any value for the `special` class in `classExpression`.  -->
<div [class.special]="isSpecial" [class]="classExpression">Some text.</div>
<!-- The `style.border` binding overrides any value for the `border` property in `styleExpression`.  -->
<div [style.border]="border" [style]="styleExpression">Some text.</div>
<h3>Source specificity</h3>
<!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
<comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding></comp-with-host-binding>
<!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
<div>
  <comp-with-host-binding [style.color]="color" dirWithStyleBinding></comp-with-host-binding>
</div>
<h3>Dynamic vs static</h3>
<!-- If `[class.special]` equals false, this value overrides the `class="special"` below -->
<div class="special" [class.special]="false">Some text.</div>
<!-- If `styleExpression` has a value for the `border` property, this value overrides the `style="border: dotted darkblue 3px"` below -->
<div style="border: dotted darkblue 3px" [style]="styleExpression">Some text.</div>
<div class="readability">
  <comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
</div>
<app-my-input-with-attribute-decorator type="number"></app-my-input-with-attribute-decorator>

このバインディングにより、<tr> は2つの列にまたがります。

HELPFUL: プロパティ名と属性名の間に違いがある場合があります。

colspan は <td> の属性ですが、大文字の "S" を使った colSpan はプロパティです。 属性バインディングを使用する場合は、小文字の "s" を使った colspan を使用してください。

colSpan プロパティへのバインディング方法の詳細については、プロパティバインディング の colspan と colSpan セクションを参照してください。

次へ