Nav menu dropdown is not working Angular4 Bootstra

Question

In my Angular4 app I created a standard nav bar. When the screen size decreases the nav menu dropdown appears. When clicking on the menu dropdown, the (collapsed) links are not shown.

Question: how can I get the menu dropdown working for Angular 4 + Bootstrap 3?

I created a standard component. This is the template file:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a routerLink="/search" class="navbar-brand">Brand-name</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a routerLink="/search">Search</a></li>
        <li><a routerLink="/edit">Edit</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a routerLink="/signup">Signup</a></li>
      </ul>
    </div>
  </div>
</nav>

Of course I read similar questions and articles, but none helped me any further. Most are about Boostrap only, not the combination with Angular 4.

Answer 1

All answers so far show how to open the dropdown menu. The answers don't show how to collapse that dropdown menu again after selecting on a menu item.

Thanks to Thomas Rundle the basic parts can be found in the following solution. I added some code. The header.component.ts is:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  isIn : boolean = false;   // store state
  constructor() { }
  ngOnInit() {
  }
  toggleState() { // click handler
    let bool = this.isIn;
    this.isIn = bool === false ? true : false;
  }
}

The template header.component.html is:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" (click)="toggleState()">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button> <!-- #1 -->
      <a class="navbar-brand" routerLink="/page1">Project Manager</a>
    </div>
    <div class="collapse navbar-collapse in" [ngClass]="{ 'in': isIn }">
      <ul class="nav navbar-nav">
        <li><a role="tab" (click)="toggleState()" data-toggle="tab" routerLink="/page1">Page 1</a></li>
        <li><a role="tab" (click)="toggleState()" data-toggle="tab" routerLink="/page2">Page 2</a></li>
      </ul>
    </div> <!-- #2 -->
  </div>
</nav>

Answer 2

https://plnkr.co/edit/oSKnNWXNafbMjCiPwqrv?p=preview

since you have target="#navbar", you have to set the id of the target to navbar for it to work.

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a routerLink="/search" class="navbar-brand">Brand-name</a>
            </div>

            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a routerLink="/search">Search</a></li>
                    <li><a routerLink="/edit">Edit</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a routerLink="/signup">Signup</a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 3

The Bootstrap Drop down adds a class open to the <ul> element for the drop down to appear and close , you can make use of Angular Directives to add the Same behaviour to the Component.

App Drop Down Directive

  import {Directive, HostListener, HostBinding} from '@angular/core';

  @Directive({
    selector: '[appDropdown]'
  })
  export class DropdownDirective {

    private isOpen:boolean = false;

    @HostBinding('class.open') get opened(){
      return this.isOpen;
    }
    constructor() { }

    @HostListener('click')open(){
      this.isOpen = true;
    }

    @HostListener('mouseleave')close(){
      this.isOpen = false;
    }

Stick it to your ul <ul class="nav navbar-nav" appDropdown>

A working Example Code