AngularのRenderer2でDOMを操作

AngularのRenderer2でDOMを操作できます。

以下のように指定を行うとElementRefで取得したネイティブのDOMにアクセスできます。

import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';
 
@Component({
  selector: 'app-component',
  templateUrl: './app-component.component.html'
})
export class AppComponent implements OnInit {
  
  constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) { }
 
  ngOnInit() {
    const target = this.el.nativeElement;
    this.renderer.setStyle(target, 'color', 'red');
    this.renderer.listen(target, 'click', () => alert('ok'));
  }

}