39. テンプレート参照変数 — # で要素に名前を付ける

テンプレート内の要素に #inputEl のようにシャープ付きの名前を書くと、その要素を同じテンプレート内の別の場所から参照できます。これをテンプレート参照変数と呼び、input要素なら inputEl.value で現在の入力値を、inputEl.focus() でフォーカス操作を直接呼び出せます。

実務では「ボタンを押した瞬間の入力値をメソッドに渡す」「別の要素へフォーカスを移す」といった、ちょっとした値の受け渡しや操作に便利です。値を常に追跡する必要がなければ、ngModel でプロパティを用意するよりも手軽に書けます。

参照できるのは同じテンプレートの中だけで、クラスのTypeScriptコードからは直接触れない点に注意してください(クラス側から扱う方法は後のviewChildのレッスンで学びます)。また、コンポーネントのタグに付けた場合は、DOM要素ではなくそのコンポーネントのインスタンスが手に入ります。

サンプルコード(フレームワーク環境が必要なため表示のみ)

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

@Component({
  selector: 'app-search-box',
  // #keywordEl で input 要素に名前を付け、同じテンプレート内から参照する
  template:
    '<input #keywordEl placeholder="キーワード">' +
    '<button (click)="search(keywordEl.value)">検索</button>',
})
export class SearchBoxComponent {
  search(keyword: string) {
    console.log('検索:', keyword); // ボタンを押した瞬間の入力値が届く
  }
}

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗