インターポレーション

インターポレーション (interplation) では、テンプレートでクラスのプロパティを表示する場所を指定します。 クラスのプロパティ foo を、テンプレート内で {{foo}} とした箇所に出力します。

では、「テンプレート」で作成した RectComponent を少し書き換えて、インターポレーションを試してみましょう。

src/app/rect.component.ts には message という string 型のプロパティを追加し、コンストラクタにて "Hello, world!" という文字で初期化します。

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

@Component({
  selector: 'rect',
  templateUrl: './rect.component.html',
  styleUrls: ['./rect.component.css']
})
export class RectComponent {
  message: string;
  constructor(){
    this.message = "Hello, world!";
  }
}

テンプレート src/app/rect.component.html は次のように {{message}} として、message の出力場所を指定します。

<div class='a'>{{message}}</div>

この結果は次のようになります。

確かに message の内容が、テンプレートの指定した場所に出力されています。