コンポーネントテンプレートは静的なHTMLだけではありません。コンポーネントクラスのデータを使用し、ユーザーインタラクションのハンドラーを設定できます。
動的なテキストの表示
Angularでは、バインディングによって、コンポーネントのテンプレートとそのデータ間に動的な接続が作成されます。この接続により、コンポーネントのデータの変更がレンダリングされたテンプレートに自動的に反映されます。
二重中括弧を使用して、テンプレートに動的なテキストを表示するバインディングを作成できます。
@Component({ selector: 'user-profile', template: `<h1>Profile for {{userName()}}</h1>`,})export class TodoListItem { userName = signal('pro_programmer_123');}
Angularがコンポーネントをレンダリングすると、以下が表示されます。
<h1>Profile file pro_programmer_123</h1>
シグナルの値が変更されると、Angularはバインディングを自動的に最新の状態に保ちます。
上記の例を基に、userNameシグナルの値を更新する場合:
this.userName.set('cool_coder_789');
レンダリングされたページは新しい値を反映して更新されます。
<h1>Profile file cool_coder_789</h1>
動的なプロパティと属性の設定
Angularは、角括弧を使用して動的な値をDOMプロパティにバインドすることをサポートしています。
@Component({ /*...*/ // `isAccountDisabled`の値に基づいて、ボタンの`disabled`プロパティを設定します。 template: `<button [disabled]="isValidUserId()">Save changes</button>`,})export class UserProfile { isValidUserId = signal(false);}
属性名にattr.をプレフィックスとして付けることで、HTMLの_属性_にもバインドできます。
<!-- `<ul>`要素の`role`属性を`listRole`の値にバインドします。 --><ul [attr.role]="listRole()">
バインドされた値が変更されると、AngularはDOMプロパティと属性を自動的に更新します。
ユーザーインタラクションの処理
Angularを使用すると、括弧を使用してテンプレート内の要素にイベントリスナーを追加できます。
@Component({ /*...*/ // `cancelSubscription`メソッドを呼び出す'click'イベントハンドラーを追加します。 template: `<button (click)="cancelSubscription()">Cancel subscription</button>`,})export class UserProfile { /* ... */ cancelSubscription() { /* イベント処理コードをここに記述します。 */ }}
イベントオブジェクトをリスナーに渡す必要がある場合は、関数呼び出し内でAngularの組み込み$event変数を使用できます。
@Component({ /*...*/ // `cancelSubscription`メソッドを呼び出す'click'イベントハンドラーを追加します。 template: `<button (click)="cancelSubscription($event)">Cancel subscription</button>`,})export class UserProfile { /* ... */ cancelSubscription(event: Event) { /* イベント処理コードをここに記述します。 */ }}
@ifと@forによる制御フロー
Angularの@ifブロックを使用して、テンプレートの一部を条件付きで非表示および表示できます。
<h1>User profile</h1>@if (isAdmin()) { <h2>Admin settings</h2> <!-- ... -->}
@ifブロックは、オプションの@elseブロックもサポートしています。
<h1>User profile</h1>@if (isAdmin()) { <h2>Admin settings</h2> <!-- ... -->} @else { <h2>User settings</h2> <!-- ... -->}
Angularの@forブロックを使用して、テンプレートの一部を複数回繰り返すことができます。
<h1>User profile</h1><ul class="user-badge-list"> @for (badge of badges(); track badge.id) { <li class="user-badge">{{badge.name}}</li> }</ul>
Angularは、上記の例に示すようにtrackキーワードを使用して、@forによって作成されたDOM要素にデータを関連付けます。詳細については、なぜ@forブロック内のtrackは重要ですか？を参照してください。
Tip: Angularテンプレートの詳細を知りたい場合は、詳細なテンプレートガイドを参照してください。
次の手順
アプリケーションに動的なデータとテンプレートが用意できたので、次は特定の要素を条件付きで非表示または表示したり、要素をループ処理したりするなど、テンプレートを強化する方法を学習します。