bootstrap 4 с Angular 8: навигационная панель работает, но не закрывается автоматически при нажатии (внутри или снаружи навигационной панели)

Question

Я использую ng- bootstrap с Angular 8, и у меня проблема с навигационной панелью. Панель навигации ведет себя правильно с точки зрения реагирования и открытия / закрытия при нажатии на значок гамбургера, но проблема в том, что он не «автоматически закрывается» при нажатии одной из ссылок или когда пользователь нажимает «за пределами» панели навигации. Он закроется, только если пользователь снова нажмет на гамбургер. Есть ли способ использовать ng- bootstrap, чтобы автоматически закрывать панель навигации?

 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>