Angular
Fundamentals of Angular Directives - Attribute Directives

Renderer2 Exercise

Set the CSS color property value using the Renderer2

Exercise Goal

Make the buttons change the color of the text

Tasks

  1. Open the Exercise Problem stackblitz using the link below.
  2. In the appColor setter method set the CSS color of the host element using the setStyle() method provided by the Renderer2 class instance.

Exercise

Exercise Problem

Notes

  • The Renderer2 class instance is already injected into the class as a private instance variable using the constructor() function.
  • The setStyle() method accepts three arguments: the element, the CSS style property name, and the value.
  • The host element is the el class instance variable (hint: access this via this.el).
  • When you click the "Red" button, the text color should be set to red, and when you click the "Blue" button, the text color should be set to blue.
  • Feel free to study and play with this first exercise!