Angular
Fundamentals of Angular Directives - Attribute Directives

Building our First Attribute Directive

PRO

Let's build our First Attribute Directive Together

Building an Attribute Directive in Angular

Let's build our first attribute directive using Angular together. Our task is to build an attribute directive, that when applied to a <button> element enhances the behavior of the button such that when the user hovers over the button, it grows horizontally using a CSS transition. To accomplish this, we'll need to access the host element via the nativeElement property of the injectable ElementRef class instance. We'll then use the Renderer2 class and it's addClass() method to add the btn-grow class to the host element.