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

2021年12月27日月曜日

Angular

t f B! P L

スポンサーリンク

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 内で完結するちょっとした処理にローカル変数は便利です。

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

QooQ