2. テンプレート補間 — {{ }} で値を表示する

クラスが持つ値をテンプレートに表示するには、{{ userName }} のような二重波カッコを使います。これをテンプレート補間と呼び、カッコの中にはプロパティ名のほか、{{ price * 1.1 }} のような簡単な式も書けます。式の結果は文字列に変換されてHTMLに埋め込まれます。

実務では、ユーザー名や件数、金額といった「データ次第で変わる文字」の表示すべてに補間を使います。クラス側で値を更新すれば表示も自動で追従するので、自分でHTMLを書き換えるコードを書く必要はありません。

カッコの中に書けるのはあくまで「値を返す式」だけで、代入(=)や if文は書けません。複雑な計算をしたくなったら、テンプレートではなくクラス側に持たせるのがコツです。

サンプルコード(フレームワーク環境が必要なため表示のみ)

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

@Component({
  selector: 'app-greeting',
  // {{ }} の中の式が評価され、結果が文字列として表示される
  template:
    '<h1>こんにちは、{{ userName }}さん</h1>' +
    '<p>税込価格: {{ price * 1.1 }} 円</p>',
})
export class GreetingComponent {
  userName = '田中';
  price = 1000;
}

公式ドキュメントで詳しく ↗