【Angular】テンプレート参照変数とは？使い方をわかりやすく解説！

Angularのテンプレートで便利に使える機能のひとつに「テンプレート参照変数（Template Reference Variables）」があります。

この記事では『テンプレート参照変数』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

  • テンプレート参照変数とは？
  • テンプレート参照変数の使い方
  • テンプレート参照変数をテンプレートの別の場所から参照する方法
  • 応用例：テンプレート参照変数で子コンポーネントのメソッドを呼び出す

テンプレート参照変数とは？

テンプレート参照変数は、HTMLテンプレート内の要素やコンポーネントやディレクティブに名前をつけて参照するための変数です。

テンプレート内で#変数名という形式で定義します。ハッシュ記号(#)で変数を定義すると、その変数で要素やコンポーネントやディレクティブを参照できるようになります。

<input #myInput type="text" />

この例では、<input>要素において、テンプレート参照変数#myInputを定義しています。その結果、<input>要素のvalue属性にmyInput.valueとしてアクセスできるようになります。

テンプレート参照変数の使い方

以下のサンプルコードは、(input)イベントを使って、入力中にリアルタイムで値を取得・表示しています。

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input #myInput type="text" (input)="onInput(myInput.value)" />
    <p>入力された値: {{ inputValue }}</p>
  `,
})
export class AppComponent {
  inputValue = '';

  onInput(value: string): void {
    this.inputValue = value;
  }
}

<input>要素において、テンプレート参照変数#myInputを定義しています。

(input)イベントは、ユーザーがキーボードで入力するたびに発火するイベントです。(input)イベントが発火すると、onInput()メソッドにmyInput.valueを渡しています。onInput()メソッドではコンポーネントのinputValueプロパティに値をセットすることで、入力した文字がテンプレートに表示されます。

テンプレート参照変数をテンプレートの別の場所から参照する方法

以下のサンプルコードでは、テンプレート参照変数をテンプレートの別の場所から参照しています。

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

@Component({
  selector: 'app-root',
  template: `
    <input #myInput type="text" (input)="(0)" />
    <p>入力された値: {{ myInput.value }}</p>
  `,
})
export class AppComponent {}

Angularはイベントが発生しないと変更検知しません。そのため、以下のサンプルコードではユーザーが入力しても、イベントが発生しないのでAngularは「変化があった」と気づけず、テンプレートが更新されません。

<input #myInput type="text" />
<p>入力された値: {{ myInput.value }}</p>

イベントを1つ追加すれば、Angularが変更を検知できるようになります。(input)="0"は「意味のない処理」ですが、「イベントが発生してる」とAngularに伝えるためのトリガーになります。このおかげでAngularはmyInput.valueの変化を検知し、テンプレートを更新することができます。

(input)="0"ではなくて(change)="0"でも構いません。ただし、(change)イベントは「フォーカスが外れたときに初めて発火するイベント」のため入力している際には発火しません。リアルタイムで更新したい場合には不向きです。

応用例：テンプレート参照変数で子コンポーネントのメソッドを呼び出す

テンプレート参照変数は、子コンポーネントのメソッドやプロパティにアクセスすることもできます。

<!-- app.component.html -->
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-child #childComp></app-child>
    <button (click)="childComp.greet()">子コンポーネントのメソッド実行</button>
  `,
})
export class AppComponent {}
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: ``,
})
export class ChildComponent {
  greet() {
    alert('こんにちは！子コンポーネントからの挨拶です！');
  }
}

上記のサンプルコードでは、テンプレート参照変数#childCompを使って子コンポーネント<app-child>を参照しています。その結果、親コンポーネントのテンプレート内から、子コンポーネントのメソッドgreet()を呼び出すことができます。このように、テンプレート参照変数を通して子コンポーネントの機能にアクセスできるのも便利な使い方のひとつです。

本記事のまとめ

この記事では『テンプレート参照変数』について、以下の内容を説明しました。

  • テンプレート参照変数とは
    • テンプレート内で#変数名と書くことで、要素・コンポーネント・ディレクティブを参照できる。
    • 例：<input #myInput> → myInput.valueで値にアクセス可能。
  • 基本的な使い方
    • イベントハンドラと組み合わせて、参照変数から値を取得する。
    • 例：(input)="onInput(myInput.value)"
  • テンプレートの別の場所から参照する場合の注意点
    • Angularはイベントが発生しないと変更検知できない。
    • イベントを強制的に発火させるため、(input)="0"などのダミー処理を入れると、値の変化が反映される。
  • (input)と(change)の違い
    • (input)：リアルタイムに発火。
    • (change)：フォーカスが外れたときに発火。
  • 応用：子コンポーネントのメソッド呼び出し
    • 子コンポーネントにテンプレート参照変数を設定することで、親テンプレートからメソッドを呼び出せる。
    • 例：<app-child #childComp> → (click)="childComp.greet()"

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

スポンサーリンク