Nav menu dropdown is not working Angular4 Bootstrap 3

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.

Bootstrap comes with some jquery libraries for collapsing stuff. Did you import them? getbootstrap.com/docs/4.0/getting-started/introduction/… — Vega
– Vega, Commented Sep 22, 2017 at 18:42
Yes, I inserted jquery.3.2..0.js and bootstrap.js to index.html. Is that the right place? I did not place the header-html as part of the index.html because the routerlinks wouldn't work. Should I import them via the scripts tag of angular-cli? Please show what I should include where. Workig with a seperate <header> seems to be a good way. — tm1701
– tm1701, Commented Sep 22, 2017 at 18:53

Rahul Singh · Accepted Answer · 2017-09-30 09:32:00Z

1

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

answered Sep 30, 2017 at 9:32

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

tm1701 Over a year ago

Thank you. When clicking on the hamburger the menu opens. OK. ISSUE - on clicking on a menu item, how to close it again?

Rahul Singh Over a year ago

@tjm1706 my code has a eveny on mouse leave. You need to add a different event for that. That itself is a new question as you need to check where the click came from

tm1701 Over a year ago

Sighn - Clicking on the menu item is the real issue. I tried many different approaches. Please HELP. This is of course only applicable on small screens when there is a dropdown menu due to the size of the screen.

Rahul Singh Over a year ago

@tjm1706 you need to another directive for the same i guess, if you want to acheive it in angular way

tm1701 Over a year ago

How? Can you show me a solution? I guess this is a very general question for angular developers.

|

tm1701 · Accepted Answer · 2017-10-04 12:30:54Z

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>

Joshua Craven · Accepted Answer · 2017-09-22 19:14:26Z

0

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>

edited Sep 22, 2017 at 19:14

answered Sep 22, 2017 at 18:58

Joshua Craven

4,5831 gold badge34 silver badges40 bronze badges

1 Comment

tm1701 Over a year ago

Thank you. When I try the responsiveness, the dropdown does not disappear on medium to larger screens. You can see that behaviour without your code. Because it is a failry common code, can you help a bit further?

Collectives™ on Stack Overflow

Nav menu dropdown is not working Angular4 Bootstrap 3

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related