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()"
お読み頂きありがとうございました。