AngularでDOMにアクセスする

AngularでのDOMへのアクセス方法について紹介します。

テンプレート内のローカル変数を利用する

HTMLテンプレート内では #hoge="xxxx"の書式で、ローカル変数が使えます。

<form #f="ngForm" (ngSubmit)="login(f)">
  <div class="input-group">
    <input name="name" required autofocus />
  </div>      
  <button class="btn btn-lg btn-primary" type="submit">ログイン</button>
</form>

この例では、form要素を送信時のlogin(f)でform要素を渡しています。
ちなみにngFormは、FormsModuleを利用するためのグルーピングに指定しています。

また、属性値なしでも利用できます。

<input name="name" #name required autofocus />

更新情報はTwitterでも配信しています