Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't Toggle Navbar in Bootstrap 4 in Angular

Why i can't toggle navbar when resizing to mobile screen in angular 4 using bootstrap 4. I included it in the angular cli in script and styles, the node modules from bootstrap. Is there something missing in my code? Please check below. Is there something wrong? Please help

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">   <a class="navbar-brand" href="#">Dashboard</a>   <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">     <span class="navbar-toggler-icon"></span>   </button>    <div class="collapse navbar-collapse" id="navbarsExampleDefault">     <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="#">Settings</a>       </li>       <li class="nav-item">         <a class="nav-link" href="#">Profile</a>       </li>       <li class="nav-item">         <a class="nav-link" href="#">Help</a>       </li>     </ul>     <form class="form-inline mt-2 mt-md-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> 

.angular-cli.json

 "styles": [     "styles.css",      "../node_modules/bootstrap/dist/css/bootstrap.min.css"   ],   "scripts": [      "../node_modules/popper.js/dist/umd/popper.min.js",     "../node_modules/jquery/dist/jquery.min.js",     "../node_modules/bootstrap/dist/js/bootstrap.min.js"    ], 

package.json

      {   "name": "dashboard2",   "version": "0.0.0",   "license": "MIT",   "scripts": {     "ng": "ng",     "start": "ng serve",     "build": "ng build",     "test": "ng test",     "lint": "ng lint",     "e2e": "ng e2e"   },   "private": true,   "dependencies": {     "@angular/animations": "^4.0.0",     "@angular/common": "^4.0.0",     "@angular/compiler": "^4.0.0",     "@angular/core": "^4.0.0",     "@angular/forms": "^4.0.0",     "@angular/http": "^4.0.0",     "@angular/platform-browser": "^4.0.0",     "@angular/platform-browser-dynamic": "^4.0.0",     "@angular/router": "^4.0.0",     "bootstrap": "^4.0.0-beta",     "core-js": "^2.4.1",     "jquery": "^3.2.1",     "popper.js": "^1.12.5",     "rxjs": "^5.4.1",     "zone.js": "^0.8.14"   },   "devDependencies": {     "@angular/cli": "1.2.7",     "@angular/compiler-cli": "^4.0.0",     "@angular/language-service": "^4.0.0",     "@types/jasmine": "~2.5.53",     "@types/jasminewd2": "~2.0.2",     "@types/node": "~6.0.60",     "codelyzer": "~3.0.1",     "jasmine-core": "~2.6.2",     "jasmine-spec-reporter": "~4.1.0",     "karma": "~1.7.0",     "karma-chrome-launcher": "~2.1.1",     "karma-cli": "~1.0.1",     "karma-coverage-istanbul-reporter": "^1.2.1",     "karma-jasmine": "~1.1.0",     "karma-jasmine-html-reporter": "^0.2.2",     "protractor": "~5.1.2",     "ts-node": "~3.0.4",     "tslint": "~5.3.2",     "typescript": "~2.3.3"   } } 
like image 764
Joseph Avatar asked Aug 30 '17 03:08

Joseph


People also ask

How do I toggle bootstrap navbar?

To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".

How do I move navbar to right in bootstrap 4?

ml-auto class of Bootstrap 4 to align navbar items to the right. The . ml-auto class automatically gives a left margin and shifts navbar items to the right.

How do I make my navbar not collapse?

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don't add any .navbar-expand class.


1 Answers

It looks like you might have been looking at this example from Bootstrap. I did, and had the same issue.

The problem is it is not an angular example so it won't work. To make it work you have to use the (click) event and a variable. So change your template to

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">   <a class="navbar-brand" href="#">Dashboard</a>   <button class="navbar-toggler d-lg-none" type="button" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarsExampleDefault" aria-label="Toggle navigation">     <span class="navbar-toggler-icon"></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="#">Settings</a>       </li>       <li class="nav-item">         <a class="nav-link" href="#">Profile</a>       </li>       <li class="nav-item">         <a class="nav-link" href="#">Help</a>       </li>     </ul>     <form class="form-inline mt-2 mt-md-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> 

If you want your menu to be collapsed by default you should set the variable to true in your class (in your .ts file for the component) public isCollapsed = true;

Here's a plunker

One more thing; If your nav is in a shared module you must remember to import NgbCollapseModule here as well.

That is, your shared.module.ts should be:

import { NgModule } from '@angular/core'; import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'; /*Plus all your other modules*/  @NgModule({   imports: [NgbCollapseModule],   declarations: [],   exports: [] }) export class SharedModule {} 
like image 64
Loke Avatar answered Oct 16 '22 03:10

Loke