Custom Directive in Angular 4

Custom Directive

—-ts file (dropdown.directive)

import { Directive, HostListener, HostBinding } from "@angular/core";

@Directive({
    selector: '[appDropdwon]'
})
export class DropdownDirective{
    @HostBinding('class.open') isOpen = false;

    @HostListener('click') toggleOpen(){
        this.isOpen = !this.isOpen;
    }
}

—-ts file (highlight.directive)

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" appDropdwon>
<a class="dropdown-toggle" style="cursor: pointer;" role="button">Manage </a>
<ul class="dropdown-menu">
<li><a style="cursor: pointer;">Save Data</a></li>
<li><a style="cursor: pointer;">Fetch Data</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>