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

Angular のテンプレート参照変数の使い方
1. 関連

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

Angular にはデータバインディングという仕組みがありますが、似た機能としてテンプレート参照変数というのがあります。

テンプレート内の要素に#変数名として指定してその変数を使用することができます。

書き方は以下の通りです。

<element #変数名></element>

以下はテキストボックスに入力した値をテキストボックスの下に表示する例です。

app.component.ts

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

@Component({
  selector: 'app-root',
  template:
  `
  <input type='text' #ttt (change)='onChange(ttt.value)'><br>
  <p>{{a}}</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  a:string;
  onChange(str: string){
    this.a = str;
  }
}

こんな感じになります。

以下のように(change)='0'とすることでビュー内だけで完結することも可能です。

app.component.ts

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

@Component({
  selector: 'app-root',
  template:
  `
  <input type='text' #ttt (change)='0'><br>
  <p>{{ttt.value}}</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

イベントバインディングすることで非同期処理が実行されるため、ビューが更新される、という仕組みを利用しています。