Bootstrap 4使用Angular 4折叠导航栏

我想使用Bootstrap 4和Angular 2制作导航栏，当浏览器的宽度达到某个值时将其内容折叠在按钮上。我实现了这一点，当导航栏折叠时，我可以看到将导航栏中的元素包围起来的按钮，但是此按钮不起作用。如何不使用jquery来解决此问题？我正在尝试使用ng-bootstrap。

在图像中，您可以在导航栏折叠时看到按钮。

到目前为止，我的代码：

<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>