使用Angular 4的Bootstrap 4折叠导航栏

Question

I want to make a navbar using Bootstrap 4 and Angular 2 that collapses his content on a button when the width of the browser reaches some value. I achieve this, and when the navbar collapses I can see the button that encloses the elements in the navbar, but this button doesn't work. How can I fix this without using jquery? I was trying to use ng-bootstrap.

In the image you can see the button when the navbar collapses.

My code so far:

<nav class="navbar navbar-expand-md fixed-top navbar-dark custom-nav">
  <span class="navbar-brand mb-0 h1">Partes vehículos</span>

  <button class="navbar-toggler" type="button">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" *ngIf="authService.isLoggedIn()">
        Usuario: {{ authService.currentUser.name }}
      </a>
      <a class="nav-item nav-link active" *ngIf="authService.isLoggedIn()">
        Perfil: TODO
      </a>
      <button class="nav-item btn btn-outline-warning ml-3 mr-3">Más opciones</button>
      <a class="nav-item nav-link active" routerLink="/" (click)="authService.logout()" *ngIf="authService.isLoggedIn()">
        Salir
        <span class="sr-only">(current)</span>
      </a>
    </div>
  </div>
</nav>

Answer 1

This stackblitz shows how you can implement the Bootstrap navbar with the ngbCollapse directive from ng-bootstrap, without using jQuery. The boolean flag isNavbarCollapsed is defined in the component class and its value is toggled by the button.

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  ...
  <button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed">
      <span class="navbar-toggler-icon"></span>
  </button>
  <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse">
    ...
  </div>        
</nav>