P79 テンプレート参照変数

【意味】
テンプレート内の特定の要素を参照するための変数

【構文】

<element #variable />

element:任意の要素
variable:変数の名前

(例1)

<input #txt id="txt" name="txt" type="text" (input)="show(txt.value)" />

(例2)

<label>姓：<input #last type="text" (change)="0" /></label><br />
<label>名：<input #first type="text" (change)="0" /></label>
<div>こんばんわ、{{(last.value)}}　{{firstvalue}}さん。</div>

テンプレート参照変数はテンプレート内であれば任意の場所で参照可能である。
なお、(change)="0"を書かないと上記コードはうまく動かない。
これは、Angularに「データバインディングをし直してほ」と伝達する役割を果たす。
なお、数値の0でなくてもよいが、当記法が一般的である。

Angularアプリケーションプログラミング