Exercise Goals

Combine your skills of using the directive @Input(), @HostBinding(), and @HostListener() decorators in Angular Directives.

Tasks

1. Open the actions.directive.ts file and define a new setter method for the position property. First, verify that the el class instance property value is not a falsey value, as this would indicate that the nativeElement of the ElementRef is not available, and as such, we are not executing in the context of a browser. Then, set the justifyContent CSS property value of the host element (hint, use this.el) to flex-start if the value specified to the setter is "start", else, set the justifyContent CSS property value of the host element to flex-end if the value specified to the setter is "end".
2. Apply the @HostBinding() decorator to the actions property in the ActionsDirective class, binding to the classList property of the host element and adding the "actions" class name.
3. Open the btn-grow.directive.ts file and add the @HostBinding() decorator to btnGrow property in the BtnGrowDirective class, binding to the classList property of the host element and adding the "btn-grow" class name.
4. Add the @HostListener() decorator to the onMouseOver() and onMouseOut() methods in the BtnGrowDirective class specifying the appropriate event to invoke each method.

Exercise

Exercise Problem

Notes

• If you are unfamiliar with a setter method, it a method that is invoked when a property value is set. Use the syntax: set position(value: string) {} to specify the setter method for the position property. The argument can be called anything. I've simply called it value in this example.
• The ElementRef and Renderer2 class instances are already injected via the class's constructor() function for you.
• Don't forget that Angular provides syntactic sugar for modifying a host element's classList property. Use the string class.class-name as the hostPropertyName argument value to the HostBinding() decorator function.
• When specifying the event using the HostListener() decorator just specify the event name, omit the "on" prefix if you are used to attaching event listeners in HTML templates.
• Open the app.component.html file and note that the appActions and appBtnGrow attribute directives are applied to the <div> element on line 9 and the <button> elements on lines 10 and 11.
• Try modifying the position attribute value on the <div> element on line 9 in app.component.html to "start" to verify that the justification is working correctly.