Unleash The Potential Of Custom Dropdown Directive In Angular2

In this post, we will learn how to create our own custom directives. We can do it by simply importing Bootstrap Java Script files but if we are writing our own JavaScript then there is no need to import the bootstrap.js file. Instead of this, we are creating our own custom dropdown, using directive.

In this post, I am using Bootstrap to design the menu, so let's start creating. 

Directive

cmd> ng g d customdropdown

In customdropdown.directive.ts file, it is shown as follows.

[code language = "typescript"]
import {
    Directive,
    HostListener,
    HostBinding
} from '@angular/core';
@Directive({
    selector: '[appcustomdropdown]'
})
export class CustomdropdownDirective {
    constructor() {}
    @HostBinding('class.open') get opened() {
        return this.isOpen;
    }
    @HostListener('click') open() {
        this.isOpen = true;
    }
    @HostListener('mouseleave') close() {
        this.isOpen = false;
    }
    private isOpen = false;
}

When I click the dropdown menu, it will open up a menu for me. When I mouse out of it, it will close for me. If you want to change the menu behavior, click mouse over then simply you need to change the 'click' to 'mouseenter' inside the @HostListener.

Inside app.module file we need to declare custom directive inside the Declaration Array

declarations: [
    AppComponent,
    CustomdropdownDirective
]

Now, to apply the directive, we need to create header component, as shown below.

cmd> ng g c header

It will generate header.component.ts,header.component.html,header.component.css.
Now, in header.component.html we will simply paste my header menu, which will design, using Bootstrap.

Thus, .html file will look, as shown below.

[code language = "html"] < nav class = "navbar navbar-inverse" > < div class = "container-fluid" >
    <!-- Brand and toggle get grouped for better mobile display -->
    < div class = "navbar-header" > < button type = "button"
class = "navbar-toggle collapsed"
data - toggle = "collapse"
data - target = "#bs-example-navbar-collapse-1"
aria - expanded = "false" > < span class = "sr-only" > Toggle navigation < /span> < span class = "icon-bar" > < /span> < span class = "icon-bar" > < /span> < span class = "icon-bar" > < /span> < /button> < a class = "navbar-brand"
href = "#" > Jinal Shah < /a> < /div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    < div class = "collapse navbar-collapse"
id = "bs-example-navbar-collapse-1" > < ul class = "nav navbar-nav" > < li > < a href = "#" > Home < span class = "sr-only" > (current) < /span></a > < /li> < li > < a href = "#" > About < /a></li > < /ul> < ul class = "nav navbar-nav navbar-right" > < li class = "dropdown"
appcustomdropdown > < a class = "dropdown-toggle"
data - toggle = "dropdown"
role = "button"
aria - haspopup = "true"
aria - expanded = "false" > Dropdown < span class = "caret" > < /span></a > < ul class = "dropdown-menu" > < li > < a href = "#" > Action < /a></li > < li > < a href = "#" > Another action < /a></li > < li > < a href = "#" > Something
else here < /a></li > < li role = "separator"
class = "divider" > < /li> < li > < a href = "#" > Separated link < /a></li > < /ul> < /li> < /ul> < /div><!-- /.navbar - collapse -->
    < /div><!-- /.container - fluid-- > < /nav> [/code]

Now, we can call the header component inside any component, using selector.

<app-header></app-header>

I hope you found this post helpful..Thank you for reading.