18

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.

Improve this question
4
  • Have you checked the browsers console for errors ? Also it would be helpful if you provide a JSfiddle with your problem :) Commented Sep 21, 2017 at 16:03
  • There isn't any error, because there isn't any event bound to the toggle button. Bootstrap should provide this, but it doesn't. And i can't provide a JSfiddle, because angular 4 isn't available in JSfiddle. Commented Sep 22, 2017 at 8:12
  • This worked well for me. Thanks! Commented Dec 6, 2017 at 16:52
  • 1
    I had same issue, @jmiguel77 answer saved me! I Commented Dec 18, 2017 at 9:41

8 Answers 8

Reset to default
53

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;
     }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

{'navbar-collapse': true} should be placed in class not ngClass
This may work but this is not the right solution. You need to include the bootstrap script in the angular.json file in the right order. Something like this, "scripts": [ "node_modules/pace-js/pace.min.js", "node_modules/jquery/dist/jquery.js", "node_modules/datatables.net/js/jquery.dataTables.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
any way to get this working with animation?
10

Its very simple and quite straight forward,

in C:\Niagara\Vega\ncPortal\.angular-cli.json

under scripts, add this line, or point to bootstrap.js file from your node_modules, 

 "../node_modules/bootstrap/dist/js/bootstrap.js"

and rebuild your app, now, not only the toggle, but all the other actions too will work as expected.

Improve this answer

1 Comment

To add to this answer, just follow this link: stackoverflow.com/a/60279396/10406731 there is an expansion to the answer.
5

As what was mentioned in the comments and the top answer by jmiguel77

Just wanted to share that I also found a similar way of doing this on ng-bootstrap Github docs https://ng-bootstrap.github.io/#/components/collapse/examples

I used [ngbCollapse]="isCollapsed"instead. Both way come up with the same result from what I saw.

Here is my code:

//app-navbar.component.html


   <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">{{title}}</a>
  <button class="navbar-toggler" type="button" (click)="toggleCollapsed()" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon" ngToggler></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault"  [ngbCollapse]="isCollapsed" >
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01" ngbDropdownMenu>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

//app-navbar.component.ts

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




@Component({
  selector: 'app-navbar',
  templateUrl: './app-navbar.component.html',
  styleUrls: ['./app-navbar.component.css']
})
export class AppNavbarComponent implements OnInit {
  @Input() title: String;
  isCollapsed = true;
  toggleCollapsed(): void {
    this.isCollapsed = !this.isCollapsed;
  }

  constructor() { }



  ngOnInit() {
  }



}
Improve this answer

Comments

1 
#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]);

  }
Improve this answer

Comments

0

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

Improve this answer

Comments

0

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. :)

Improve this answer

Comments

0

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

Improve this answer

Comments

0

As Sanish Joseph mentioned, even if the approved response works (as a workaround), the correct solution is to have angular.json (or angular-cli.json) with the scripts including bootstrap.min.js.

And as the bootstrap script is missing, it's work checking if the bootstrap CSS isn't missing as well from that config file:

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.