入門
基本概念

テンプレート

Angularのテンプレート構文を使用して、動的なユーザーインターフェースを作成します。

コンポーネントテンプレートは静的なHTMLだけではありません。コンポーネントクラスのデータを使用し、ユーザーインタラクションのハンドラーを設定できます。

動的なテキストの表示

Angularでは、バインディングによって、コンポーネントのテンプレートとそのデータ間に動的な接続が作成されます。この接続により、コンポーネントのデータの変更がレンダリングされたテンプレートに自動的に反映されます。

二重中括弧を使用して、テンプレートに動的なテキストを表示するバインディングを作成できます。

@Component({
  selector: 'user-profile',
  template: `<h1>Profile for {{ userName() }}</h1>`,
})
export class UserProfile {
  userName = signal('pro_programmer_123');
}

Angularがコンポーネントをレンダリングすると、以下が表示されます。

<h1>Profile for pro_programmer_123</h1>

シグナルの値が変更されると、Angularはバインディングを自動的に最新の状態に保ちます。 上記の例を基に、userNameシグナルの値を更新する場合:

this.userName.set('cool_coder_789');

レンダリングされたページは新しい値を反映して更新されます。

<h1>Profile for cool_coder_789</h1>

動的なプロパティと属性の設定

Angularは、角括弧を使用して動的な値をDOMプロパティにバインドすることをサポートしています。

@Component({
  /*...*/
  // `isValidUserId`の値に基づいて、ボタンの`disabled`プロパティを設定します。
  template: `<button [disabled]="!isValidUserId()">Save changes</button>`,
})
export class UserProfile {
  isValidUserId = signal(false);
}

属性名にattr.をプレフィックスとして付けることで、HTMLの_属性_にもバインドできます。

<!-- `<ul>`要素の`role`属性を`listRole`の値にバインドします。 -->
<ul [attr.role]="listRole()"></ul>

バインドされた値が変更されると、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テンプレートの詳細を知りたい場合は、詳細なテンプレートガイドを参照してください。

次の手順

アプリケーションに動的なデータとテンプレートが用意できたので、次は特定の要素を条件付きで非表示または表示したり、要素をループ処理したりするなど、テンプレートを強化する方法を学習します。