Describe Angular’s Renderer2 and when to use it.

Angular’s Renderer2 provides an abstraction layer to safely manipulate the DOM without directly accessing it, ensuring compatibility across different platforms like server-side rendering and web workers. Use Renderer2 to add, remove, or modify elements, attributes, styles, and event listeners in a platform-independent way.

Renderer2 offers safe, cross-platform DOM manipulation methods, avoiding direct DOM access. It is useful for handling DOM changes in Angular apps running in diverse environments like browsers, servers, or mobile devices.

Code

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

@Component({
  selector: 'app-demo',
  template: `
	<p #para>This is a paragraph.</p>
  `
})
export class DemoComponent {
  @ViewChild('para', { static: true }) para!: ElementRef;

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

  changeColor() {
	this.renderer.setStyle(this.para.nativeElement, 'color', 'red');
  }
}