NG-bootstrap 4 with Angular 8: Navbar works, but doesn't auto-close on click (inside or outside navbar)

Question

I am using ng-bootstrap with Angular 8 and I'm having a problem with the navbar. The navbar behaves correctly in terms of being responsive and opening/closing when clicking the hamburger icon, but the problem is that it does not "autoclose" when one of the links are clicked or when the user clicks "outside" of the navbar. It will only close if the user clicks on the hamburger again. Is there a way using ng-bootstrap to have the navbar autoclose on click?

In my research, I found a number of examples of how to set up the navbar with Angular 4+ and ng-bootstrap, and I'm noticing that even the "correct" examples have the same issue. Is it even possible to autoclose the navbar on click? Here are some examples:

This is the typical code I found for the navbar using ng-bootstrap:

<nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <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="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>

Here are plunker and stackblitz examples:
http://plnkr.co/edit/PlGTWzSGqawgQC2wfKp8?p=preview

https://stackblitz.com/edit/angular-ww6oap

In both examples, you'll see that the navbar works, but clicking on a link or outside the navbar does not close it. Only clicking on the hamburger icon again closes it.

Answer 1

I figured it out. We can add this to the routerlinks in order to set the isNavbarCollapsed variable to true:

(click)="isNavbarCollapsed = true"

Altogether it looks like this:

<div class="collapse navbar-collapse" [ngbCollapse]="isNavbarCollapsed" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" [routerLink]="['/dash/', someParam]" (click)="isNavbarCollapsed = true">Dashboard <span
              class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/archive" (click)="isNavbarCollapsed = true">Archive</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/help" (click)="isNavbarCollapsed = true">Help</a>
    </li>
  </ul>
</div>

Hope that helps someone else. This technique is currently (2019-06-18) not included in the ng-bootstrap documentation so it wasn't immediately apparent what method is the best practice for closing the ng-bootstrap navbar when it is in the responsive state (hamburger menu).