テンプレートに値を出す ― 補間 {{ }}

導入

クラスに持たせたデータをテンプレートに表示するには、補間（インターポレーション） {{ }} を使います。React の { } に似ていますが、波かっこは2重です。

説明

クラスのプロパティをテンプレートに埋め込みます。

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>こんにちは、{{ name }} さん</h1>
    <p>あなたは {{ age }} 歳です。</p>
    <p>10年後は {{ age + 10 }} 歳。</p>
  `,
})
class AppComponent {
  name: string = 'さくら';
  age: number = 20;
}

• {{ name }} … クラスの name プロパティの値が表示されます。
• {{ age + 10 }} … 中に式も書けます。
• name: string の : string は TypeScript の型注釈。「これは文字列」という宣言で、間違いを防ぎます。

やってみよう

name を自分の名前に変え、hobby（趣味）プロパティを追加して「趣味は〇〇です」と表示してみましょう。