Custom Directive in Angular Application Example

 How to create custom directive in Angular Application.

Directive class created by developer towards the requirement of an application
is called "custom directive".

custom directives are mostly application specific, this will be reusable across
 different components with in an application

*syntax:
   @Directive({
       selector:'[selectorname]'
             })
   export class <directiveclassname>
   {
    constructor(el:ElementRef)
    {
       manipulate html element using element ref
     }
    }
 ->element ref is providing native Element prop, this prop can be used
   to reference html element applied with directive


Steps to work with custom directive:
 1.create a directive
 2.place directive into a module
 3.apply directive to html element
   syntax:
       <tagname directive>..</tagname>



Requirement

  register component------> User Registration[title]-->back color-black
                                                          color -white
                                                          width -30%

  logincomponent    ------> User Authentication[title]-->backcolor-black
                                                          color-white
                                                          width-30%
          ....
                                            |
                                 repetition of styling towards a title
                                 in different components
                                            |
                                 this repetition can be avoided by creating
                                  a title directive


Example

ng g d title --flat
*this will create a directive class and will be imported and placed into
 app module declarations automatically

goto title.directive.ts


goto title.directive.ts

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

@Directive({
  selector: '[appTitle]'
})
export class TitleDirective {

  constructor(el:ElementRef) {
    el.nativeElement.style.backgroundColor="black"
    el.nativeElement.style.color="white";
    el.nativeElement.style.width="30%";
   }
}

Create a component and call that above directive

.html


<h2 appTitle>Rajakonda Uday Kumar</h2>
<h3 appTitle>Hyd</h3>


Output




Note:
-----
In the above case apptitle directive instance will be created for h2 and h3,el.nativeelement
 will provide access to h2|h3,this tags will be applied with styling[background color,..]


Directive with input property:

Directive can receive data from template[html element] using input property.

Syntax:


  @Input()
   <prop name>:<datatype>;

  template                                                               directive
      |                                      |
  <tag name                                                             @Input()
    directive  prop name="value"----------->                <prop name>:..;


Example

Create a custom directive 







custom directive changes

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

@Directive({
  selector: '[appTitle1]'
})
export class Title1Directive implements OnInit
{
  @Input()
  textcolor:string | undefined;

  constructor(private el:ElementRef) 
  { 
    this.el.nativeElement.style.backgroundColor="black";
    this.el.nativeElement.style.width="30%";
  }

  ngOnInit(): void 
  {
      this.el.nativeElement.style.color=this.textcolor;
 }
}


.HTML Changes

<h2 appTitle1 textcolor="white">Rajakonda Uday kumar</h2>
<h3 appTitle1 textcolor="yellow">Ameerpet,Hyd</h3>

Output












Note:
----
*If input property name is same as directive name then we can input data directly to directive

goto title1.directive.ts
      [replace textcolor with appTitle1]


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

@Directive({
  selector: '[appTitle1]'
})
export class Title1Directive implements OnInit
{
  @Input()
  appTitle1:string | undefined;

  constructor(private el:ElementRef) 
  { 
    this.el.nativeElement.style.backgroundColor="black";
    this.el.nativeElement.style.width="30%";
  }

  ngOnInit(): void 
  {
    this.el.nativeElement.style.color=this.appTitle1;
   }
}



.html changes

<h2 [appTitle1]="'white'">Rajakonda Uday Kumar</h2>
<h3 [appTitle1]="'yellow'">Ameerpet,Hyd</h3> 

Execution Flow


constructor will be executed before input property initialization
*ngOnInit method will be executed automatically[like constructor] after
 input property initialization,this method comes with OnInit interface

    <h2 appTitle1  textcolor="white">
           |
     Title1Directive class instance[textcolor-""]
           |
     constructor exec
     {
     this.el.nativeElement.style.color=this.textcolor;
     }                                       |
                                             "" 
           |
     input property initialization[textcolor="white"]
           |
     ngOnInit method exec
     {
        this.el.nativeElement.style.color=this.textcolor;
     }                                      |
                                                                     white





Directive with event handling:
------------------------------
*Directive can handle html element event using Host Listener decorator
*syntax:
  @HostListener('eventname')
   <methodname>()             <----------------- <button directive>text</button>
   {
     ...
   }

Host Listener will register a directive class method to html element event

Requirement:

register component----->button[register]------yellow back color for mouse enter
                                                                   bisque    "       "  mouse leave


login component  ------>button[login]   --->yellow back color for mouse enter
                                                               bisque    "       "  mouse leave
                                                 |
                                repetition of mouse enter and mouse leave                               
                                events code across different components
                                                        |
                                                the solution is custom directive


Example

create a directive to handle mouse enter and mouse leave events of html element









Directive Changes

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

@Directive({
  selector: '[appHover]'
})
export class HoverDirective {

  constructor(private el:ElementRef) {
    this.el.nativeElement.style.width="30%";
   }
   @HostListener('mouseenter')
   onmouseenter(){
    this.el.nativeElement.style.backgroundColor="yellow";
   }

   @HostListener('mouseleave')
   onmouseleave(){
    this.el.nativeElement.style.backgroundColor="bisque";
   }
}

.html Changes

<button appHover>Register</button>
<br>
<h2 appHover>New Tutorials</h2>

Output