2017年11月12日

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'));
}

}

posted by ねこまんま at 00:00 | Comment(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。