AngularでDOMにアクセスする

AngularでDOMにアクセスする

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

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

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


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

</form>

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

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

<input name="name" required="" autofocus="" type="text" />

  • Template reference variables – angular.io

    ElementRef

    ElementRef というクラスを介してDOMにアクセスできます。
    ElementRef.nativeElement プロパティでネイティブのDOMを参照します。

    import { Component, ElementRef } from 'angular2/core';
    
    @Component({
    selector: 'my-element',
    template: `
    <button click="" onclick="">click me!</button>
    <div class="box1">foo</div>
    <div class="box2">bar</div>
    <div class="box3">baz</div>
    `,
    })
    export class MyElement {
    private _el: HTMLElement;
    
    constructor(el: ElementRef) {
    this._el = el.nativeElement;
    }
    
    onClick() {
    this._el.querySelectorAll('.box2').style.backgroundColor = 'red';
    }
    }
    

    この例では、buttonをクリックすると、.box2 の背景が赤色になります。

    ElementRefをimportして、constructor での引数elとしてメンバーに追加しています。
    el.nativeElement 自体は、 <my-element> を参照しています。

    あとは、querySelectorgetElementsByTagName などDOMの取得方法で各要素を走査できます。

    確認してみましょう

    コンポーネントの親子関係をまたいでDOMを取得する場合、
    すぐに複雑化して収集がつかなくなる可能性があるため、
    全体のアプリケーションの開発設計を見直してみましょう。

    DOMを直接参照・書き換えるのではなく、Angularアプリケーションでデータを管理して、
    各コンポーネントのテンプレートでデータバインディングするほうがスマートな場合がほとんどです。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer-app.comの自主開発や上越TechMeetupの主催などを行っています。

プロフィール