Navbar not working with Angular8 and Bootstrap4 - drop-down-menu

Question

I am working with Angular8 and want to use Bootstrap4 navbar.
But Dropdown-Menu not working
Here is Angular.json code
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Here is my navbar.component.html code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Here is my output in Browser
Anything am I missing ?

Answer 1

Change your navbar.component.html to this:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown" [class.show]="navbarOpen">
<a class="nav-link dropdown-toggle" (click)="toggleNavbar()">
Dropdown Menu
</a>
<div class="dropdown-menu" [class.show]="navbarOpen" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
And in your navbar.component.ts write above the constructor:
public navbarOpen: boolean = false;
and under your constructor write:
public toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
Please NEVER use jQuery in Angular2+ Projects.
1. You don't need it
2. In my opinion it would be anti-pattern
If you do it like that, it should work. Give me some feedback whether it helped you.

Answer 2

enter image description here and check it

Answer 3

This code works fine
import {
Directive,
ElementRef,
HostBinding,
HostListener,
, Renderer2
} from '#angular/core';
#Directive({
selector: '[appToggleMenu]'
})
export class ToggleMenuDirective {
#HostBinding('class.show') isToggle: boolean = false;
constructor(
private el: ElementRef,
private render: Renderer2
) { }
#HostListener('click') toggleClick() {
this.isToggle = !this.isToggle;
const ui = this.el.nativeElement.querySelector('.dropdown-menu');
if (ui) {
if (this.isToggle) {
this.render.addClass(ui, 'show')
} else {
this.render.removeClass(ui, 'show');
}
}
}
}
html:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid ">
<a class="navbar-brand" href="#">Navbar</a>
<div>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" appToggleMenu>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>