Creating Custom Directive in Angular 5

Directives: Directives are almost similar like HTML elements.
If you see a placeholder property of an HTML input element it’s a built-in directive of HTML element.

There are 3 different kinds of directive in Angular
1. Components: It is very common directive in Angular you can see it in most of the places. It is directive with template.
2. Structural Directives: These directives change the DOM by adding removing elements from it. Common Examples are like *ngIf, *ngFor.
3. Attribute Directives: These will change the behavior of a HTML element. Example: ngStyle is the built in directive of a Angular.

Most of the time we create a custom directive to change the behavior of an element, dynamically we want to apply some styles, or we want something to be get done, before we trigger function.

Let’s discuss similar case scenario here. For Example User has to agree to a condition/accept the agreement before we go ahead and perform some operation.

Creating Custom Directive in Angular 5

Let’s create a Directive

Directives have to be created with the @Directive decorator and also you need to specify a selector for a directive(selector name should be in the camelCase.) so that we can use it in HTML element.

Create a confirm.directive.ts file in your project. Don’t forget to mention the confirm.directive.ts file in the app.module.ts file and also put it in the declarations array.

import {Directive, HostListener, Input, ElementRef} from '@angular/core';

@Directive({
    selector: `[karmaConfirm]`
  })
  export class ConfirmDirective {
    @Input() karmaConfirm = () => {};
 
    @HostListener('click', ['$event'])
    confirmKarma() {
       const confirmed = window.confirm('Are you sure you want to do this?');
      
      if(confirmed) {
        this.karmaConfirm();
        console.log("This got confirmed");
       }
    }
}

As you can see in the above code we created a directive with selector ‘karmaConfirm’. Using the @HostListener decorator we are listening to the click event of the DOM(component) for which this directive got attached.

If the confirmKarma function returns true then we go ahead and call the function of a karma component.

Creating Custom Directive in Angular 5

Let’s attach directive to the component’s(karma.component.ts) template’s HTML button element.

//This code goes into the karma.component.html file.
<button type="button" [karmaConfirm]="doSomeKarma">
  coding-karma 
</button>

// This code goes into the karma.component.ts file
 doSomeKarma() {
    console.log('coding-karma');
    location.href = 'http://coding-karma.com';
  }

As you can see in the code we did property binding of a function call. Once the directive returns true we trigger function call domeSomeKarma() or else it won’t trigger.

I hope this gave you some idea about custom directive and how it can be used. We can even create attribute directive and modify the behavior of the elements like changing the styles etc.,

Happy Coding..!

Creating Custom Directive in Angular 5