How To Make Custom Directive In Angular2

import { Component } from '@angular/core';

@Component({
    selector:'child1',
    template:`
      <div class="container-fluid">
                 <div class="panel panel-default">
                     <div class="panel-heading">
                          <h3 align="center">Component 1</h3>
                     </div>
                 </div>
                  <div class="panel-body">
                     <button highlight bcolor="orange" class="btn btn-sm">Click</button>
                     <h3 highlight bcolor="red">Hello1 Directive</h3>
                     <p highlight bcolor="green">Hello2 Directive</p>
                  </div>
        </div>
    `
})

export class childComponent1{
}

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

@Directive({
    selector:'[highlight]'   // for directive will be defined inside square brackets
})

export class highlightDirective{
     @Input()
     public bcolor:string;   // accessing value of this property outside from html.

// when directive is called angular pass refrence of element in into below variable e
     constructor(private e:ElementRef){
         console.log("Highlight directive constructor called");
             // native element will give to original element hold by elementRef
         console.log("Element on which directive is applied is", e.nativeElement);

         var self = this;
       // changed the background color on which native element is applied
       e.nativeElement.style.backgroundColor = self.bcolor;
       e.nativeElement.style.color = "#fff";
       e.nativeElement.style.border = "2px solid #ddd";
      e.nativeElement.style.padding = "10px";

      // changed the style only when mouse over on the HTML element
        this.e.nativeElement.onmouseover = function(){  // anonymous function
              self.e.nativeElement.style.backgroundColor = self.bcolor;
            e.nativeElement.style.border = "2px solid greeen";
        }

    // changed the style only when mouse out on the HTML element
        e.nativeElement.onmouseout = function(){  // anonymous function
              e.nativeElement.style.backgroundColor = "#ccc";
            e.nativeElement.style.border = "2px solid #ddd";
        }
      // you can pass input parameter to the directive also and set dynamic color
     }
}