【Angular】インターポレーション(補間)とは？[データバインディング]

この記事ではAngularの『インターポレーション(補間)』について

• Angularのインターポレーション(補間)とは
• インターポレーション(補間)の使い方

などを図を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Angularのインターポレーション(補間)とは

Angularのインターポレーション(補間)は最も基本的なデータバインディングです。

Angularのインターポレーション(補間)はコンポーネントのプロパティやメソッドをテンプレート内で表示するために使用します。そのためには、コンポーネントのプロパティ名やメソッド名を二重中括弧{{…}}で囲みます。

では実際にプログラムでインターポレーションの使い方を説明します。

インターポレーション(補間)の使い方

以下にインターポレーション(補間)を使用した基本的なコンポーネントを示しています。

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

@Component({
  selector: 'app-root',
  template: `<h1>{{message}}</h1>`,
})
export class AppComponent {
  message = 'Hello Angular!'
}

インターポレーション(補間)を使うための手順を以下に示します。

ではこれから上記の手順について順番に説明します。

テンプレートに埋め込む値をコンポーネントのプロパティで定義する

export class AppComponent {
  message = 'Hello Angular!' //AppComponentコンポーネントのmessageプロパティを定義
}

まず、テンプレートに埋め込む値をコンポーネントのプロパティで定義します。

上記のプログラムでは、AppComponentコンポーネントのmessageプロパティを定義しています。このmessageプロパティは、初期値として「'Hello Angular!'」という文字列を保持しています。

テンプレート内でコンポーネントのプロパティを二重中括弧{{…}}で囲む

template: `<h1>{{message}}</h1>`, //テンプレート内で{{message}}として埋め込む

次に、テンプレート内でコンポーネントのプロパティを二重中括弧{{…}}で囲みます。

上記のプログラムでは、テンプレート内でAppComponentコンポーネントのmessageプロパティを二重中括弧{{…}}で囲んでいます。

その結果、テンプレート内の{{message}}にはAppComponentコンポーネントのmessageプロパティの値('Hello Angular!')が埋め込まれます。

したがって、最終的なHTML出力は以下のようになります。

<h1>Hello Angular!</h1>

プログラムの実行結果

上記のプログラムの実行結果は以下のようになります。

「AppComponentコンポーネントのmessageプロパティの値('Hello Angular!')」がテンプレートの指定した箇所で表示されます。

コンポーネントの「メソッド」や「式」もテンプレートに埋め込むことができる

コンポーネントの「プロパティ」だけでなく「メソッド」や「式」もテンプレートに埋め込むことができます。

以下にインターポレーション(補間)を使用したコンポーネントを示しています。

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

@Component({
  selector: 'app-root',
  template: `
  <h2>{{greet()}}</h2>
  <h3>{{5*10}}</h3>
  `,
})
export class AppComponent {
  greet():string{
    return 'Hello Guest!'
  }
}

上記のプログラムではAngularのインターポレーション(補間)を使用して、「AppComponentコンポーネントのgreet()メソッド」と「式(5*10)」をテンプレート内で二重中括弧{{…}}で囲んでいます。

その結果、テンプレート内の{{greet()}}にはgreet()メソッドの戻り値('Hello Guest!')が埋め込まれます。また、{{5*10}}には5*10の評価結果(50)が埋め込まれます。

したがって、最終的なHTML出力は以下のようになります。

<h2>Hello Guest!</h2>
<h3>50</h3>

プログラムの実行結果

上記のプログラムの実行結果は以下のようになります。

「greet()メソッドの戻り値('Hello Guest!')」と「5*10の評価結果(50)」がテンプレートの指定した箇所で表示されていることが分かります。

本記事のまとめ

この記事ではAngularの『インターポレーション(補間)』について、以下の内容を説明しました。

• Angularのインターポレーション(補間)とは
• インターポレーション(補間)の使い方

お読み頂きありがとうございました。