Angularで生のDOMを操作する

結論

下記のようにする。

import {
  Component,
  ViewChild,
  AfterViewInit,
  OnInit,
  ElementRef
} from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnInit {
  @ViewChild('thisdom') thisdom: ElementRef;
  name: string = 'Angular ';
  ngAfterViewInit() {
    console.log('ngAfterViewInit', this.thisdom);
    this.thisdom.nativeElement.style.backgroundColor = 'yellow';
  }
  ngOnInit() {
    console.log('ngOnInit', this.thisdom);
  }
}

<hello name="{{ name }}"></hello>
<p>
  this is element get demo
</p>
<div #thisdom>hi</div>

解説

取得するElementの指定

html側では指定したいHTMLタグに#{id名}をつける。
今回は#thisdomをつけて、下記のようにしている。

<div #thisdom>hi</div>

TypeScript側で、このIDを指定する必要がある。

TypeScriptで取得

ViewChildでID名を指定しプロパティとして取得する。

@ViewChild('thisdom') thisdom: ElementRef;

このときのタイプはElementRefとなりnativeElementというものが素の要素である。

操作時の注意

ngOnInitで操作しようとすると、取得できていないため注意。
ライフサイクルの問題で最初に操作を実行する場合はngAfterViewInitを利用する必要がある。