Modify DOM elegantly using Angular ElementRef and Render2

Modify DOM elegantly using Angular ElementRef and Render2

This is an example using ElementRef and Render2 to modify CSS style dynamically.

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <h2 #greet>Hello {{ name }}</h2>
  `,
})
export class AppComponent {
  name: string = 'ElementRef usage';

  @ViewChild('greet')
  greet: ElementRef;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  ngAfterViewInit() {
    // this.greet.nativeElement.style.backgroundColor  = 'red';
    this.renderer.setStyle(this.greet.nativeElement, 'backgroundColor', 'red');
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.