Angular で「#」シャープが付いているタグは何や？

スポンサーリンク

HTML 内で使えるローカル変数

Angular では、タグにシャープ（#）から始まる変数名をつけることで、HTML 内で使えるローカル変数を定義することができる。

例えば、次のように書くことで、 input タグに name というローカル変数名を付けられる。

<input type="text" #name>

宣言したローカル変数は、同じ HTML 内からアクセス可能です。

<button (click)="onClick(name.value)">SET</button>

<input> 要素などの HTML 標準タグに変数名を付けた場合、変数の値はネイティブの HTML 要素なり、Angular コンポーネントのタグに変数名をつけると、変数の中身はコンポーネントのインスタンスになります。

スポンサーリンク

まとめ

Angular の HTML でローカル変数を定義する方法を解説しました。

基本的には Angular 標準のバインディングを使用することになりますが、HTML 内で完結するちょっとした処理にローカル変数は便利です。