While using ng-bootstrap with Angular 8, I encountered a problem with the navbar. The navbar functions properly by being responsive and opening/closing when clicking the hamburger icon. However, the issue arises when it does not automatically close when a link is clicked or when the user clicks outside of the navbar. It only closes if the user clicks on the hamburger icon again. Is there a way to configure ng-bootstrap to make the navbar autoclose upon click?
isCollapsed = false; <nav class="navbar navbar-expand-lg navbar-light">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
(click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed"
>
<span class="navbar-toggler-icon"></span>
</button>
<!--Logo-->
<div class="sidebar-header d-none d-lg-block">
<img src="assets/img/logo_color_cloudev.png" alt="cloudev-logo" />
</div>
<div class="collapse navbar-collapse" id="navbarNavDropdown" [ngbCollapse]="isCollapsed">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" routerLink="/dashboard" routerLinkActive="active" (click)="isHide()"><i class="fa fa-desktop dash"></i><span>Dashboard</span></a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/roles" routerLinkActive="active" *ngIf="this.isAdmin"><i class="fa fa-gg-circle icon"></i>Roles</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/users" routerLinkActive="active" *ngIf="this.isAdmin"><i class="fa fa-users user"></i>Users</a>
</li>
<!--Dropdown-->
<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">
<i class="fa fa-line-chart leaves"></i><span>Leave Management</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" routerLink="/user-leaves" *ngIf="!this.isAdmin" routerLinkActive="active">My leaves</a>
<a class="dropdown-item" routerLinkActive="active" *ngIf="this.isAdmin" routerLink="/leave-types">Leave types</a>
<a class="dropdown-item" routerLinkActive="active" *ngIf="this.isAdmin" routerLink="/leave-request-admin">Leave Requests</a>
<a class="dropdown-item" routerLink="/holidays" routerLinkActive="active">Holidays</a>
</div>
</li>
<!--Toggle for header-->
<div class="fullview">
<hr class="d-block d-lg-none" />
<li class="nav-item">
<a class="nav-link d-block d-lg-none" routerLink="/my-profile" routerLinkActive="active"><i class="fa fa-user-md icon"></i>My profile</a>
</li>
<li class="nav-item">
<a class="nav-link d-block d-lg-none" routerLink="/passwordchange" routerLinkActive="active"><i class="fa fa-key icon"></i>Reset password</a>
</li>
<li class="nav-item">
<a class="nav-link d-block d-lg-none" (click)="logout()" routerLinkActive="active"><i class="fa fa-sign-out icon"></i>Logout</a>
</li>
</div>
</ul>
</div>
</nav>