I am trying to set the default NavBar bootstrap directly given in the examples of Bootstrap nav bar documentation.
But it looks like not working. The UI is coming properly but dropdown is not working.
Please check below stackblitz link for the same. https://stackblitz.com/edit/angular-ivy-sh1tpx?file=src/app/app.component.html
Tried to use the default nav bar example from below link. https://getbootstrap.com/docs/5.1/components/navbar/
In your app.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
...
(click)="toggleNavbarCollapsing()" // <-- add this line
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" // <-- remove `collapse` class from here
id="navbarNavDropdown"
[class.collapse]="navbarCollapsed"> // <-- add this line
...
</nav>
and in your app.component.ts
export class AppComponent {
// add belove code
navbarCollapsed = true;
toggleNavbarCollapsing() {
this.navbarCollapsed = !this.navbarCollapsed;
}
}