Angularのテンプレート変数

Angularでは、テンプレート変数を使用してページの要素にアクセスできます。 これにより、要素を変数にバインドし、コンポーネントの動作中にそれを参照することが可能になります。 このような変数を宣言するには、その名前の前に記号 # を付けます。

実際に見てみましょう。例として、div要素があるとします。それをテンプレート変数に記録します:

app/app.component.html<div #userName>
  text
</div>

これで、変数 userName には、divのDOM要素への参照が格納されます。 そして、この参照は純粋なJavaScriptで行うのと同じように扱うことができます。 例えば、このdivのテキストを別の要素内に表示してみましょう:

app/app.component.html<div>
  {{ userName.textContent }}
</div>