How to create @Directives in Angular

 Directives in Angular

What is Directive?

• The directive is markers on a DOM element that tell Angular to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Types of Directive

There are 4 type of Directives listed below

• Components directives : It is mainly used to specify the HTML templates. It is the most commonly-used directive in an Angular project. It is decorated with the @component decorator e.g. app.component
• Structural directives : The structural directive is used to add or remove the HTML Element in the Dom Layout e.g. *ngIf , *ngFor .. etc
• Attribute directives : The Attribute directives is used to change/modify apearance of DOM element *ngClass , *ngStyle .. etc
• Custom Directive : The Custom Directive is created by a developer based on requirement

Advantage of using Custom Directive

it is vulnerable to XSS attacks when we directly use ElementRef in our application. It is better to create a custom directive and use ElementRef inside directive to change appearance or behavior of the host element.

HostListener & HostBinding

• HostListener : This is a function decorator that accepts an event name as an argument. When that event gets fired on the host element it calls the associated function.
• HostBinding : This is a function decorator that accepts a css style as an argument.

Let's create one custom directive based on our requirement to understand it better

Requirement : Create a directive which will increase and decrease font size of DOM element on mouse enter and hover and will also change its background color

Let's follow below step to full fill the requirement

• Step 1: Create a new Projet using command ng new Directive-Angular
• Step 2: Create a custom direct using command ng g directive TextTransformation
• Step 3: Place below code in app.component.html <h2 apptexttransformation=""> Hover on me </h2>
• Step 4: Place below code in text-transformation.directive.ts fontSize: string; @HostBinding('style.background-color') background: string; constructor(private elementRef: ElementRef) { } @HostListener('mouseenter') onMouseEnter() { this.background = 'pink'; this.fontSize = '50px'; this.IncreaseFontSize(); } @HostListener('mouseleave') onMouseLeave() { this.background = 'yellow'; this.fontSize = '12px'; this.IncreaseFontSize(); } private IncreaseFontSize() { this.elementRef.nativeElement.style.fontSize = this.fontSize; }
• Step 5: You are ready with the code use ng serve and hit enter key. open your browser on http://localhost:4200/ it will start working

Ref Link

• Git  :https://github.com/coremicroservices/Angular-Directive
• Facebook&nbsp:https://www.facebook.com/coremicroservices/
• Youtube : https://youtu.be/VK_GXqP29g4