Angular 2 - hide bootstrap navbar on nav click

angular

Solution

Pretty nice and easy way to do it within Angular 2/4 template only:

<nav class="navbar navbar-default" aria-expanded="false">
  <div class="container-wrapper">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="navbar-collapse collapse no-transition" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
      <ul class="nav navbar-nav" (click)="isCollapsed = !isCollapsed">
        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="/">Home</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/about">About</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/portfolio">Portfolio</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/contacts">Contacts</a></li>
      </ul>
    </div>

  </div>
</nav>

Problem

In mobile, clicking bootstrap navbar item does't hide the menu. My menu button, which shows for mobiles: ``` <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> ``` Searching for this issue returned results unreleated to angular 2 and I have no idea how to implement them. How I can I hide my navbar when user clicks a link? ``` <li><a routerLink="/page">Click this should hide nav</a></li> ```

Original source