Can't Toggle Navbar in Bootstrap 4 in Angular

Question

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 bootst

Answer 1

If someone is looking for a way to dynamically toggle navbar you can use ViewChild with a template variable to get a reference to the button, then you can fire the click event:

HTML

<button #menu 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>

TS

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('menu') menu: ElementRef;

toggleMenu() {
    this.menu.nativeElement.click();
}

closeMenu() {
    const isMenuOpen = this.menu.nativeElement.getAttribute('aria-expanded') === 'true';
    if (isMenuOpen) {
        this.menu.nativeElement.click();
    }
}

I know it's not an answer to this question but it's very related and might helpful.

Answer 2

@Joseph, it looks like you haven't installed the dependencies for bootstrap (and bootstrap itself) for the navbar toggle to work.

If you open up terminal or the command line and navigate to the directory that contains your package.json file, run the following commands:

npm install --save jquery
npm install --save popper.js
npm install --save bootstrap@4.0.0-beta

These commands will install the requisite dependencies for you project. They're fairly explicit in what they're doing, but if you need a refresh on what they're doing or how they work, I would suggest looking at the documentation for npm install located here.

After they're installed, you'll want to make sure you include them in your .angular-cli.json file, so you're angular app can use them.

Answer 3

This worked for me!!!

Now we can toggle navbar when resizing to mobile screen in angular 4 using bootstrap 4.

Try this code

app.component.html

<nav class="navbar navbar-expand-lg justify-content-between">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="navButton">
    <i class="fa fa-bars"></i>
  </button>
  <div class="row">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item" *ngFor="let menu of mainmenu, let i = index">
          <a class="nav-link" (click)="findIndex(i)" routerLink="/{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
          <ng-container *ngIf="menu.children && menu.children.length > 0">
            <span class="d-block d-sm-none"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
          </ng-container>
          <ul class="sub_menu dropdown-menu" [ngClass]="{active : isActive(i)}" *ngIf="menu.children && menu.children.length > 0">
            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" routerLink="/{{sub_menu.href}}" (click)="closeMenu()"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

app.component.ts

closeMenu() {
    var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
    if (isMobile) {
      document.getElementById('navButton').click();
   }
}

Answer 4

Bootstrap - 4.4.1, Angular-cli: 7.3.9

The easiest way is to import the js bundle in your client entry point:

import 'bootstrap/dist/js/bootstrap.bundle'; line into 'polyfills.ts' file