Angular TIPS

Angular TIPS

要素の属性に値をバインドするには?(Attribute Binding)

2017年2月27日 (2017/04/14 更新)

HTML要素の属性に対応するプロパティではなく、属性そのものにバインディングする方法を説明する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 2/4対応。v2時点で執筆し、v4時点で内容を確認・検証しました。

 一般的なHTML要素は、その属性と同名のプロパティを持っています。例えば<img>要素はsrc属性に対応するsrcプロパティを持ち、<a>要素はhref属性に対応するhrefプロパティを持ちます。そして、Property Bindingがバインドの対象とするのはあくまでプロパティであって、属性ではありません。

 よって、属性としては存在するが、プロパティとしては存在しないものについては、Property Bindingでは正しく動作しません。例えば以下のような例は、正しく動作しません。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<table border="1">
    <tr><td [colspan]="len">1</td></tr>
    <tr><td>2</td><td>3</td></tr>`
})
export class AppComponent {
  len = 2;
}
要素のcolspan属性に値をバインドしようとした例(app/app.component.ts)

 上の例は、<td>要素のcolspan属性に値をバインドしようとした例です。しかし、実行してみると、「Can't bind to 'colspan' since it isn't a known property of 'td'.」というエラーが発生してしまいます。<td>要素にcolspanプロパティがないので、バインドもできない、というわけです。Property Bindingのバインド対象はあくまでプロパティなので、このようなケースには対応できないのです。

 このような場合に利用するのがAttribute Bindingです。

[構文]Attribute Binding

[attr.属性名] = "式"

 属性名の前に「attr.」という接頭辞を付けたうえで、ブラケットでくくるわけです。この例であれば、太字の部分を以下のように書き換えます。

HTML
<tr><td [attr.colspan]="len">1</td></tr>
Attribute Bindingでcolspan属性に値をバインドする例(app/app.component.ts)

 果たして、今度は以下のような結果が得られ、確かにcolspan属性に値がバインドできていることが確認できます。

colspan属性に値を設定した結果
colspan属性に値を設定した結果

 Attribute Bindingは、このほか、ARIA属性SVG属性などを動的にバインドする場合などにも利用します。

処理対象:テンプレート構文(Template Syntax) カテゴリ:基本
処理対象:Attribute Binding(属性バインディング) カテゴリ:テンプレート構文(Template Syntax)
処理対象:バインディング構文(Binding Syntax) カテゴリ:テンプレート構文(Template Syntax)
処理対象:[attr.属性名] = "式" カテゴリ:テンプレート構文(Template Syntax) > バインディング構文(Binding Syntax)

※以下では、本稿の前後を合わせて5回分(第8回~第12回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

8. 要素オブジェクトのプロパティに値をバインドするには?(Property Binding)

要素のプロパティに値をバインドするProperty Bindingについて、「[プロパティ名] = "式"」「bind-プロパティ名 = "式"」「{{プロパティ名}}」という3つのバインディング構文を説明する。

9. ビューにHTML文書をバインドするには?(Property Binding)

プロパティバインディングでHTMLタグを含む文字列にバインドした場合、デフォルトでサニタイズされる挙動を確認。逆に意図的にサニタイズさせない方法を説明する。

10. 【現在、表示中】≫ 要素の属性に値をバインドするには?(Attribute Binding)

HTML要素の属性に対応するプロパティではなく、属性そのものにバインディングする方法を説明する。

11. JavaScriptオブジェクトをJSON形式に変換するには?(json)

JavaScriptのJSON.stringifyメソッドと同じように、AngularでJavaScriptのオブジェクトをJSON形式に変換できるjsonパイプの基本的な使い方を説明する。

12. 文字列を大文字/小文字に変換するには?(lowercase/uppercase)

JavaScriptのStringクラスにおけるtoLowerCase/toUpperCaseメソッドと同じように、Angularで文字列を小文字/大文字に変換できるlowercase/uppercaseパイプの基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!