Unleash The Potential Of Custom Dropdown Directive In Angular2

hello Readers,

Today by this Blog post we will learn how to create our own custom directives.Well we can do it by simply importing bootstrap java script files but we are writing our own javascript  then 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 for designing the menu.so let’s start with creating

Directive

cmd> ng g d customdropdown

now in customdropdown.directive.ts file


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;
}

so when i click the dropdown menu it will open up menu for me when  i mouse out of it ,it will close for me.if you want to change the menu behavior click to 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.

cmd> ng g c header

it will generate header.component.ts,header.component.html,header.component.css.

now in header.component.html will simply paste my header menu which will design using bootstrap.

so your .html file will look like this

<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>

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

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s