Angular のテンプレート参照変数の使い方

Angular のテンプレート参照変数の使い方

Angular にはデータバインディングという仕組みがありますが、似た機能としてテンプレート参照変数というのがあります。

テンプレート内の要素に#変数名として指定してその変数を使用することができます。

書き方は以下の通りです。

以下はテキストボックスに入力した値をテキストボックスの下に表示する例です。

app.component.ts

こんな感じになります。

Angular のテンプレート参照変数の使い方

以下のように(change)=’0’`とすることでビュー内だけで完結することも可能です。

app.component.ts

イベントバインディングすることで非同期処理が実行されるため、ビューが更新される、という仕組みを利用しています。

詳細は「AngularとTypeScriptでSPAを作成する」を参照ください。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA