Angularのプロパティバインディングは、HTML要素またはディレクティブのプロパティに値を設定するのに役立ちます。プロパティバインディングを使用して、ボタン機能の切り替え、パスをプログラムで設定、コンポーネント間で値を共有などを行うことができます。
データフローの理解
プロパティバインディングは、値をコンポーネントのプロパティからターゲット要素のプロパティに単方向に移動します。
ターゲット要素のプロパティを読み取ったり、ターゲット要素のメソッドを呼び出したりするには、ViewChild と ContentChild のAPIリファレンスを参照してください。
プロパティへのバインディング
HELPFUL: イベントのリスニングについては、イベントバインディング を参照してください。
要素のプロパティにバインディングするには、そのプロパティを角括弧 [] で囲みます。角括弧は、プロパティがターゲットプロパティであることを示します。
ターゲットプロパティは、値を割り当てる対象となるDOMプロパティです。
コンポーネントのプロパティ（ItemDetailComponent の childItem など）に文字列を割り当てるには、同じ角括弧割り当て記法を使用します。
src/app/app.component.html
<div> <h1>Property Binding with Angular</h1> <h2>Binding the src property of an image:</h2> <img alt="item" [src]="itemImageUrl"> <hr /> <h2>Binding to the colSpan property</h2> <table border=1> <tr><td>Column 1</td><td>Column 2</td></tr> <!-- Notice the colSpan property is camel case --> <tr><td [colSpan]="2">Span 2 columns</td></tr> </table> <hr /> <h2>Button disabled state bound to isUnchanged property:</h2> <!-- Bind button disabled state to `isUnchanged` property --> <button type="button" [disabled]="isUnchanged">Disabled Button</button> <hr /> <h2>Binding to a property of a directive</h2> <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p> <hr /> <h2>Model property of a custom component:</h2> <app-item-detail [childItem]="parentItem"></app-item-detail> <app-item-detail childItem="parentItem"></app-item-detail> <h3>Pass objects:</h3> <app-item-list [items]="currentItems"></app-item-list> <hr /> <h2>Property binding and interpolation</h2> <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p> <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p> <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p> <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p> <hr /> <h2>Malicious content</h2> <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p> <!-- Angular generates a warning for the following line as it sanitizes them WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss). --> <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p></div>
ほとんどの場合、ターゲット名はプロパティ名になります。これは、ターゲット名が属性名のように見える場合でも同様です。
この例では、src は <img> 要素のプロパティ名です。
角括弧 [] によって、Angularは割り当ての右辺を動的式として評価します。
角括弧を省略すると、Angularは右辺を文字列リテラルとして扱い、プロパティにその静的な値を設定します。
プロパティに文字列を割り当てるには、次のコードを入力します。
src/app/app.component.html
<div> <h1>Property Binding with Angular</h1> <h2>Binding the src property of an image:</h2> <img alt="item" [src]="itemImageUrl"> <hr /> <h2>Binding to the colSpan property</h2> <table border=1> <tr><td>Column 1</td><td>Column 2</td></tr> <!-- Notice the colSpan property is camel case --> <tr><td [colSpan]="2">Span 2 columns</td></tr> </table> <hr /> <h2>Button disabled state bound to isUnchanged property:</h2> <!-- Bind button disabled state to `isUnchanged` property --> <button type="button" [disabled]="isUnchanged">Disabled Button</button> <hr /> <h2>Binding to a property of a directive</h2> <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p> <hr /> <h2>Model property of a custom component:</h2> <app-item-detail [childItem]="parentItem"></app-item-detail> <app-item-detail childItem="parentItem"></app-item-detail> <h3>Pass objects:</h3> <app-item-list [items]="currentItems"></app-item-list> <hr /> <h2>Property binding and interpolation</h2> <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p> <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p> <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p> <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p> <hr /> <h2>Malicious content</h2> <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p> <!-- Angular generates a warning for the following line as it sanitizes them WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss). --> <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p></div>
角括弧を省略すると、parentItem の値ではなく、parentItem という文字列がレンダリングされます。
要素のプロパティをコンポーネントのプロパティの値に設定する
<img> 要素の src プロパティをコンポーネントのプロパティにバインディングするには、src を角括弧で囲み、その後ろに等号、コンポーネントのプロパティを記述します。
itemImageUrl プロパティを使用して、次のコードを入力します。
src/app/app.component.html
<div> <h1>Property Binding with Angular</h1> <h2>Binding the src property of an image:</h2> <img alt="item" [src]="itemImageUrl"> <hr /> <h2>Binding to the colSpan property</h2> <table border=1> <tr><td>Column 1</td><td>Column 2</td></tr> <!-- Notice the colSpan property is camel case --> <tr><td [colSpan]="2">Span 2 columns</td></tr> </table> <hr /> <h2>Button disabled state bound to isUnchanged property:</h2> <!-- Bind button disabled state to `isUnchanged` property --> <button type="button" [disabled]="isUnchanged">Disabled Button</button> <hr /> <h2>Binding to a property of a directive</h2> <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p> <hr /> <h2>Model property of a custom component:</h2> <app-item-detail [childItem]="parentItem"></app-item-detail> <app-item-detail childItem="parentItem"></app-item-detail> <h3>Pass objects:</h3> <app-item-list [items]="currentItems"></app-item-list> <hr /> <h2>Property binding and interpolation</h2> <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p> <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p> <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p> <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p> <hr /> <h2>Malicious content</h2> <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p> <!-- Angular generates a warning for the following line as it sanitizes them WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss). --> <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p></div>
itemImageUrl プロパティをクラス（この場合は AppComponent）で宣言します。
src/app/app.component.ts
import {Component} from '@angular/core';import {NgClass} from '@angular/common';import {ItemDetailComponent} from './item-detail.component';import {ItemListComponent} from './item-list.component';@Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', imports: [ItemDetailComponent, ItemListComponent, NgClass], styleUrls: ['./app.component.css'],})export class AppComponent { itemImageUrl = '../assets/phone.svg'; isUnchanged = true; classes = 'special'; parentItem = 'lamp'; currentItems = [ { id: 21, name: 'phone', }, ]; interpolationTitle = 'Interpolation'; propertyTitle = 'Property binding'; evilTitle = 'Template <script>alert("evil never sleeps")</script> Syntax';}
colspan と colSpan
属性 colspan とプロパティ colSpan の違いは、よく混同されます。2つの名前は、1文字しか違いません。
colSpan を使用してプロパティバインディングを行うには、次のコードを入力します。
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>
コンポーネントの isUnchanged プロパティが true の間、ボタンを無効にするには、次のコードを入力します。
src/app/app.component.html
<div> <h1>Property Binding with Angular</h1> <h2>Binding the src property of an image:</h2> <img alt="item" [src]="itemImageUrl"> <hr /> <h2>Binding to the colSpan property</h2> <table border=1> <tr><td>Column 1</td><td>Column 2</td></tr> <!-- Notice the colSpan property is camel case --> <tr><td [colSpan]="2">Span 2 columns</td></tr> </table> <hr /> <h2>Button disabled state bound to isUnchanged property:</h2> <!-- Bind button disabled state to `isUnchanged` property --> <button type="button" [disabled]="isUnchanged">Disabled Button</button> <hr /> <h2>Binding to a property of a directive</h2> <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p> <hr /> <h2>Model property of a custom component:</h2> <app-item-detail [childItem]="parentItem"></app-item-detail> <app-item-detail childItem="parentItem"></app-item-detail> <h3>Pass objects:</h3> <app-item-list [items]="currentItems"></app-item-list> <hr /> <h2>Property binding and interpolation</h2> <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p> <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p> <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p> <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p> <hr /> <h2>Malicious content</h2> <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p> <!-- Angular generates a warning for the following line as it sanitizes them WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss). --> <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p></div>
ディレクティブのプロパティを設定するには、次のコードを入力します。
src/app/app.component.html
<div> <h1>Property Binding with Angular</h1> <h2>Binding the src property of an image:</h2> <img alt="item" [src]="itemImageUrl"> <hr /> <h2>Binding to the colSpan property</h2> <table border=1> <tr><td>Column 1</td><td>Column 2</td></tr> <!-- Notice the colSpan property is camel case --> <tr><td [colSpan]="2">Span 2 columns</td></tr> </table> <hr /> <h2>Button disabled state bound to isUnchanged property:</h2> <!-- Bind button disabled state to `isUnchanged` property --> <button type="button" [disabled]="isUnchanged">Disabled Button</button> <hr /> <h2>Binding to a property of a directive</h2> <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p> <hr /> <h2>Model property of a custom component:</h2> <app-item-detail [childItem]="parentItem"></app-item-detail> <app-item-detail childItem="parentItem"></app-item-detail> <h3>Pass objects:</h3> <app-item-list [items]="currentItems"></app-item-list> <hr /> <h2>Property binding and interpolation</h2> <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p> <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p> <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p> <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p> <hr /> <h2>Malicious content</h2> <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p> <!-- Angular generates a warning for the following line as it sanitizes them WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss). --> <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p></div>
親コンポーネントと子コンポーネントが互いに通信できるように、カスタムコンポーネントのモデルプロパティを設定するには、次のコードを入力します。
src/app/app.component.html
<div> <h1>Property Binding with Angular</h1> <h2>Binding the src property of an image:</h2> <img alt="item" [src]="itemImageUrl"> <hr /> <h2>Binding to the colSpan property</h2> <table border=1> <tr><td>Column 1</td><td>Column 2</td></tr> <!-- Notice the colSpan property is camel case --> <tr><td [colSpan]="2">Span 2 columns</td></tr> </table> <hr /> <h2>Button disabled state bound to isUnchanged property:</h2> <!-- Bind button disabled state to `isUnchanged` property --> <button type="button" [disabled]="isUnchanged">Disabled Button</button> <hr /> <h2>Binding to a property of a directive</h2> <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p> <hr /> <h2>Model property of a custom component:</h2> <app-item-detail [childItem]="parentItem"></app-item-detail> <app-item-detail childItem="parentItem"></app-item-detail> <h3>Pass objects:</h3> <app-item-list [items]="currentItems"></app-item-list> <hr /> <h2>Property binding and interpolation</h2> <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p> <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p> <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p> <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p> <hr /> <h2>Malicious content</h2> <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p> <!-- Angular generates a warning for the following line as it sanitizes them WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss). --> <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p></div>
ボタン機能の切り替え
ブール値を使用してボタンの機能を無効にするには、disabled DOM属性をクラスのブールプロパティにバインディングします。
src/app/app.component.html
<div> <h1>Property Binding with Angular</h1> <h2>Binding the src property of an image:</h2> <img alt="item" [src]="itemImageUrl"> <hr /> <h2>Binding to the colSpan property</h2> <table border=1> <tr><td>Column 1</td><td>Column 2</td></tr> <!-- Notice the colSpan property is camel case --> <tr><td [colSpan]="2">Span 2 columns</td></tr> </table> <hr /> <h2>Button disabled state bound to isUnchanged property:</h2> <!-- Bind button disabled state to `isUnchanged` property --> <button type="button" [disabled]="isUnchanged">Disabled Button</button> <hr /> <h2>Binding to a property of a directive</h2> <p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p> <hr /> <h2>Model property of a custom component:</h2> <app-item-detail [childItem]="parentItem"></app-item-detail> <app-item-detail childItem="parentItem"></app-item-detail> <h3>Pass objects:</h3> <app-item-list [items]="currentItems"></app-item-list> <hr /> <h2>Property binding and interpolation</h2> <p><img alt="Interpolated item" src="{{ itemImageUrl }}"> is the <em>interpolated</em> image.</p> <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <em>property bound</em> image.</p> <p><span>"{{ interpolationTitle }}" is the <em>interpolated</em> title.</span></p> <p>"<span [innerHTML]="propertyTitle"></span>" is the <em>property bound</em> title.</p> <hr /> <h2>Malicious content</h2> <p><span>"{{ evilTitle }}" is the <em>interpolated</em> evil title.</span></p> <!-- Angular generates a warning for the following line as it sanitizes them WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss). --> <p>"<span [innerHTML]="evilTitle"></span>" is the <em>property bound</em> evil title.</p></div>
AppComponent 内の isUnchanged プロパティの値が true であるため、Angularはボタンを無効にします。
src/app/app.component.ts
import {Component} from '@angular/core';import {NgClass} from '@angular/common';import {ItemDetailComponent} from './item-detail.component';import {ItemListComponent} from './item-list.component';@Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', imports: [ItemDetailComponent, ItemListComponent, NgClass], styleUrls: ['./app.component.css'],})export class AppComponent { itemImageUrl = '../assets/phone.svg'; isUnchanged = true; classes = 'special'; parentItem = 'lamp'; currentItems = [ { id: 21, name: 'phone', }, ]; interpolationTitle = 'Interpolation'; propertyTitle = 'Property binding'; evilTitle = 'Template <script>alert("evil never sleeps")</script> Syntax';}