Navbar toggle not working with Angular 4 / ng-bootstrap

user_8650047 0
Viewed 16261

I am using ng-bootstrap in my angular 4 project:

<navbar class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <button aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarsDefault" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a> 
    <div class="collapse navbar-collapse" id="navbarsDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link active" routerlink="/dashboard" routerlinkactive="active" ng-reflect-router-link="/dashboard" ng-reflect-router-link-active="active" href="/dashboard">Dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerlink="/program" routerlinkactive="active" ng-reflect-router-link="/program" ng-reflect-router-link-active="active" href="/program">Programm</a>
            </li>          
        </ul>
    </div>
</navbar>

The navbar is there, it is responsive, it seems to work fine. But the navbar-toggler button does not toggle the navbar, when it is collapsed and i can't find an error.

navbar ng-bootstrap toggle
7 Answers

I ended up doing something like this:

In the html template i have this code:

 <nav id="mainNavbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
           data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
           aria-expanded="false" aria-label="Toggle navigation"
           (click)="toggleCollapsed()">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarSupportedContent" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
            ......
        </div>
</nav>

In the component I have this

export class NavComponent {
     collapsed = true;
     toggleCollapsed(): void {
       this.collapsed = !this.collapsed;
     }
}
user_13301300 
#you can use click method in your html and use router navigate in your type script.

#In HTML File
     <a class="nav-link" (click)="onMenuClick('profile')">Profile </a>
#In Type Script file

 onMenuClick(path) {
    $('.navbar-toggler').click();
    this.router.navigate(['/' + path]);

  }
user_96879680

I thought I could share what worked for me.

I've got a couple of requirements you might consider;

  • Angular 8
  • Bootstrap 4.5

...inside my html template [header.component.html]


<nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a routerLink="/" class="navbar-brand">APP_NAME</a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
      (click)="collapsed = !this.collapsed"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div
      id="navbarSupportedContent"
      [ngClass]="{ collapse: collapsed, 'navbar-collapse': true }"
    >
      <!-- right nav menus -->
      <ul class="navbar-nav ml-auto">
        <li routerLinkActive="active" class="nav-item">
          <a routerLink="/LINK_1" class="nav-link"> lINK_1 </a>
        </li>
        <li routerLinkActive="active" class="nav-item">
          <a routerLink="/LINK_2" class="nav-link"> LINK_2 </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

...inside my ts component [header.component.ts]

import { Component, OnInit} from "@angular/core";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.css"],
})
export class HeaderComponent implements OnInit {

  collapsed = true;

  constructor() {}

  ngOnInit() {}
}

I hope this helps. Feedbacks and suggestions are appreciated. :)

user_124987840

I had the same problem with Angular 10, Bootstrap 4.5. After 2 days of checking all possibilites with installing and providing all necessary dependencies I've followed instructions from link provided by Wyatt Lansdale (https://ng-bootstrap.github.io/#/components/collapse/examples).

As long as I had hamburger icon from Bootstrap docs (< span class="navbar-toggler-icon" >< /span >) there was still no difference, but once I change it for unicode character for the hamburger icon (& # 9 7 7 6 ; without spaces) problem is solved! Eventually works:)

user_140143270

Add "./node_modules/jquery/dist/jquery.js", in Angular.json file under script tag and it will work.

user_99997060
Related