Exercise Goals

Apply a class and styles to an element that has the appActions directive applied to it.

Tasks

1. Apply the [appActions] selector for the ActionsDirective to the <div> in app.component.html on line 9 that contains the cancel and save <button> elements.
2. Open the actions.directive.ts file, and define the ngOnInit() lifecycle method.
3. Access the nativeElement property of the injected ElementRef class instance, and verify that the value is not undefined (or falsey).
4. Use the addClass() method of the Renderer2 class instance to add the actions class to the host element.
5. Use the setStyle() method of the Renderer2 class instance to set some additional style properties on the host element.

Exercise

Exercise Problem

Notes

• The ElementRef and Renderer2 class instances are injected for you using the constructor() function. You can access these using the this scope within the class.
• Currently, the ActionsDirective class should now an error indicating that the class incorrectly implements the OnInit interface. This is because the OnInit interface is a code contract that requires that the class implement the ngOnInit() method. This error should go away once you have defined the method.
• We want to check if the nativeElement value is undefined. It it is undefined then our application is running in a context outside of the browser that does not implement this feature.
• The addClass() method requires two arguments: the element, and the class name.
• The setStyle() method requires three arguments: the element, the CSS style property name, and the CSS style property value.