サンプルコードで身につける: テンプレート補間 — {{ }} で値を表示する

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1プロパティの値をそのまま表示する

補間のいちばん基本の形で、クラスのプロパティ名を {{ }} に書くと値が文字として表示されます。HTMLに直接名前を書くのと違い、データを変えれば表示も変わります。ユーザー名や店舗名など「データ次第で変わる文字」の表示はすべてここから始まります。

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

@Component({
  selector: 'app-welcome',
  // {{ }} の中のプロパティ名が、クラスの値に置き換わる
  template: '<p>ようこそ、{{ userName }}さん</p>',
})
export class WelcomeComponent {
  userName = '佐藤';
}

2式の計算結果を表示する

{{ }} の中にはプロパティ名だけでなく、四則演算などの式も書けます。式が評価されて「結果の値」が表示される、というのが補間の正確な動きです。税込価格や小計のような、その場で計算できる簡単な値の表示によく使われます。

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

@Component({
  selector: 'app-price-view',
  // 中の式が評価され、計算結果が表示される
  template:
    '<p>本体価格: {{ price }} 円</p>' +
    '<p>税込: {{ price * 1.1 }} 円</p>' +
    '<p>{{ quantity }} 個で {{ price * quantity }} 円</p>',
})
export class PriceViewComponent {
  price = 1000;
  quantity = 3;
}

3メソッドの戻り値を表示する

{{ greeting() }} のようにメソッド呼び出しも「値を返す式」なので補間に書けます。条件分岐のような少し複雑なロジックは、テンプレートに詰め込まずクラス側のメソッドに寄せるのがコツです。テンプレートを読みやすく保つ実務の定番テクニックです。

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

@Component({
  selector: 'app-time-greeting',
  // メソッド呼び出しも「値を返す式」なので補間に書ける
  template: '<p>{{ greeting() }}、{{ userName }}さん</p>',
})
export class TimeGreetingComponent {
  userName = '鈴木';
  hour = 9;

  greeting() {
    // 複雑なロジックはテンプレートではなくクラス側に置く
    return this.hour < 12 ? 'おはようございます' : 'こんにちは';
  }
}

4配列の件数を表示する

{{ results.length }} のようにプロパティの先のプロパティへもアクセスできます。「検索結果: ◯件」のような件数表示は、ほぼすべての一覧画面に登場する補間の代表的な使いどころです。配列が増減すれば件数表示も自動で追従します。

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

@Component({
  selector: 'app-result-count',
  // ドットでつないだ式も書ける
  template: '<p>検索結果: {{ results.length }} 件</p>',
})
export class ResultCountComponent {
  results = ['Angular入門', 'Angular実践', 'シグナル徹底解説'];
}

5注文サマリーの表示

ECサイトの注文確認画面のように、複数の補間を組み合わせて1つの画面を作る実務寄りの例です。小計の計算はメソッドにまとめ、テンプレートでは表示したい場所に補間を並べるだけにしています。元の値(単価や個数)を変えれば、すべての表示が一斉に追従します。

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

@Component({
  selector: 'app-order-summary',
  template:
    '<p>小計: {{ subtotal() }} 円</p>' +
    '<p>送料: {{ shippingFee }} 円</p>' +
    '<p>合計: {{ subtotal() + shippingFee }} 円</p>',
})
export class OrderSummaryComponent {
  unitPrice = 1200;
  quantity = 3;
  shippingFee = 500;

  subtotal() {
    return this.unitPrice * this.quantity;
  }
}