補間とは、マークアップされたテキストに式を埋め込むことを指します。デフォルトでは、補間は二重中括弧 {{ と }} を区切り文字として使用します。
補間がどのように機能するかを説明するために、currentCustomer 変数を含むAngularコンポーネントを考えてみましょう。
import {Component} from '@angular/core';import {NgFor} from '@angular/common';import {CUSTOMERS} from './customers';@Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', imports: [NgFor], styleUrls: ['./app.component.css'],})export class AppComponent { customers = CUSTOMERS; currentCustomer = 'Maria'; title = 'Featured product:'; itemImageUrl = '../assets/potted-plant.svg'; recommended = 'You might also like:'; itemImageUrl2 = '../assets/lamp.svg'; getVal(): number { return 2; }}
対応するコンポーネントテンプレートで、この変数の値を表示するために補間を使用します。
<div> <h1>Interpolation and Template Expressions</h1> <hr /> <div> <h2>Interpolation</h2> <h3>Current customer: {{ currentCustomer }}</h3> <p>{{ title }}</p> <div><img alt="item" src="{{ itemImageUrl }}"></div> <h3>Evaluating template expressions </h3> <h4>Simple evaluation (to a string):</h4> <!-- "The sum of 1 + 1 is 2" --> <p>The sum of 1 + 1 is {{ 1 + 1 }}.</p> <h4>Evaluates using a method (also evaluates to a string):</h4> <!-- "The sum of 1 + 1 is not 4" --> <p>The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}.</p> </div> <hr /><h2>Expression Context</h2><div> <h3>Component context, properties of app.component.ts:</h3> <h4>{{ recommended }}</h4> <img alt="item 2" [src]="itemImageUrl2"></div><div> <h4>Template context, template input variables (let customer):</h4> <ul> @for (customer of customers; track customer) { <li>{{ customer.name }}</li> } </ul></div><div (keyup)="0"> <h4>Template context: template reference variables (#customerInput):</h4> <label for="customer-input">Type something: <input id="customer-input" #customerInput>{{ customerInput.value }} </label></div></div>
Angularは currentCustomer を対応するコンポーネントプロパティの文字列値に置き換えます。この場合、値は Maria です。
次の例では、Angularは title と itemImageUrl プロパティを評価して、タイトルテキストと画像を表示します。
<div> <h1>Interpolation and Template Expressions</h1> <hr /> <div> <h2>Interpolation</h2> <h3>Current customer: {{ currentCustomer }}</h3> <p>{{ title }}</p> <div><img alt="item" src="{{ itemImageUrl }}"></div> <h3>Evaluating template expressions </h3> <h4>Simple evaluation (to a string):</h4> <!-- "The sum of 1 + 1 is 2" --> <p>The sum of 1 + 1 is {{ 1 + 1 }}.</p> <h4>Evaluates using a method (also evaluates to a string):</h4> <!-- "The sum of 1 + 1 is not 4" --> <p>The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}.</p> </div> <hr /><h2>Expression Context</h2><div> <h3>Component context, properties of app.component.ts:</h3> <h4>{{ recommended }}</h4> <img alt="item 2" [src]="itemImageUrl2"></div><div> <h4>Template context, template input variables (let customer):</h4> <ul> @for (customer of customers; track customer) { <li>{{ customer.name }}</li> } </ul></div><div (keyup)="0"> <h4>Template context: template reference variables (#customerInput):</h4> <label for="customer-input">Type something: <input id="customer-input" #customerInput>{{ customerInput.value }} </label></div></div>