Setting Element Styles

Show how Renderer2 can be used to set CSS styles on an element dynamically.

// Import the Renderer2 from Angular core
import { Renderer2 } from '@angular/core';

Import the Renderer2 from Angular core to use for dynamic style manipulation.

constructor(private renderer: Renderer2) { }

Inject the Renderer2 into the constructor of the component.

// Example function to set styles dynamically
setElementStyles(el: HTMLElement) {
  // Use Renderer2 to set a single style
  this.renderer.setStyle(el, 'color', 'blue');

  // Use Renderer2 to set multiple styles
  const styles = {
    'font-weight': 'bold',
    'border': '1px solid red'
  };

  Object.keys(styles).forEach(property => {
    this.renderer.setStyle(el, property, styles[property]);
  });
}

Defines a function that uses Renderer2 to set the 'color' style to 'blue', and also sets multiple styles: 'font-weight' to 'bold' and 'border' to '1px solid red' via a loop through an object of styles.

// Assume we have an element reference 'elementRef'
// Call setElementStyles with that element
setElementStyles(this.elementRef.nativeElement);

Assuming an ElementRef is available, this calls the setElementStyles function to apply styles to the native element of the ElementRef.