Here is the code snippet I am working with:
HTML
<nav class="navbar bg-dark navbar-dark">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">Recipe Book</a>
</div>
<div class="navbar">
<ul class="nav navbar-nav nav">
<li class="nav-item" (click)="onSelect('recipe')"><a href="#">Recipies</a></li>
<li class="nav-item" (click)="onSelect('shoping-list')"><a href="#">Shopping List</a></li>
</ul>
<div
class="btn-group"
appDropdown
#r="appDropdown">
<button
class="btn btn-close-white dropdown-toggle"
type="button"
data-toggle="dropdown">
Menage<span class="caret"></span>
</button>
<ul class="dropdown-menu" [ngClass]="{'show':r.isOpen}">
<li><a class="dropdown-item" href="#">Save Data</a></li>
<li><a class="dropdown-item" href="#">Fetch Data</a></li>
</ul>
</div>
</div>
</div>
</nav>
Custom Dropdown Directive:
import { Directive, HostBinding, HostListener } from "@angular/core";
@Directive({
selector: '[appDropdown]',
exportAs: "appDropdown"
})
export class DropdownDirective {
@HostBinding('class.show') isOpen = false;
@HostListener('click') toggleOpen() {
this.isOpen = !this.isOpen;
}
}
Issue with Dropdown Menu:
When clicking on the dropdown menu, it covers the button and affects the overall look. Here are screenshots illustrating the problem: Initial View After Click