Angularのテンプレート変数

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

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

<div #userName>
	text
</div>

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

<div>
	{{ userName.textContent }}
</div>

div要素と画像要素が与えられています。画像への参照をテンプレート変数に記録してください。画像の src をdiv内に表示してください。