Apply a class and styles to an element that has the
appActions directive applied to it.
- Apply the
[appActions]selector for the
<div>in app.component.html on line 9 that contains the cancel and save
- Open the actions.directive.ts file, and define the
- Access the
nativeElementproperty of the injected
ElementRefclass instance, and verify that the value is not
- Use the
addClass()method of the
Renderer2class instance to add the
actionsclass to the host element.
- Use the
setStyle()method of the
Renderer2class instance to set some additional style properties on the host element.
Renderer2class instances are injected for you using the
constructor()function. You can access these using the
thisscope within the class.
- Currently, the
ActionsDirectiveclass should now an error indicating that the class incorrectly implements the
OnInitinterface. This is because the
OnInitinterface 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
undefined. It it is undefined then our application is running in a context outside of the browser that does not implement this feature.
addClass()method requires two arguments: the element, and the class name.
setStyle()method requires three arguments: the element, the CSS style property name, and the CSS style property value.