Angularで新規にDOMを作成して、コンポーネントに挿入する

AngularでDOMを操作したい時にRenderer2クラスを利用することができる。

バージョン情報

• Angular: 5.0.3

• node: 8.1.4

• macOS High Sierra(10.13.3)

• Ionic: 3.9.2

Renderer2クラスの使い方

実際のコードでRenderer2クラスの利用方法について説明していく。

サンプルコードで実現すること

アプリ起動から10秒後に、コンポーネント内で作成したdiv要素をDOMに挿入して、壁を出現させたい。

👆の画像はまだ壁が出現していない状態。

サンプルコード

src/pages/home/home.ts:

import { Component, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements AfterViewInit {

  // Renderer2クラスをDIする
  constructor(private renderer2: Renderer2,
              private el: ElementRef) {}

  ngAfterViewInit() {
    // 10秒後に壁を表示する
    Observable.interval(10000)
      .subscribe(() => this.setWall())
      .unsubscribe();
  }

  setWall = (): void => {
    const pos = 40;

    // div要素を二つ作成
    const wallTop = this.renderer2.createElement('div');
    const wallBottom = this.renderer2.createElement('div');

    // div要素にスタイルクラスwallを追加
    this.renderer2.addClass(wallTop, 'wall');
    this.renderer2.addClass(wallBottom, 'wall');

    // div要素のスタイルを変更
    this.renderer2.setStyle(wallTop, 'bottom', `${pos + 10}%`);
    this.renderer2.setStyle(wallBottom, 'top', `${(100 - pos) + 10}%`);

    this.renderer2.setStyle(wallTop, 'left', `400px`);
    this.renderer2.setStyle(wallBottom, 'left', `400px`);

    // 自コンポーネントの配下に作成したdiv要素を挿入する
    this.renderer2.appendChild(this.el.nativeElement, wallTop);
    this.renderer2.appendChild(this.el.nativeElement, wallBottom);
  }
}

実行結果

10秒後にRenderer2クラスで作成したdiv要素（壁）が出現する

参考サイト

Angular