Navbar not working with Angular8 and Bootstrap4

Question

I am working with Angular8 and want to use Bootstrap4 navbar. But Dropdown-Menu not working

Here is Angular.json code

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

Here is my navbar.component.html code

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <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="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown Menu
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <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>
        </div>
      </nav>

Here is my output in Browser

Anything am I missing ?

don't use jQuery... instead go for ng-bootstrap.github.io/ or valor-software.com/ngx-bootstrap — Akber Iqbal, Aug 02 '19 at 11:02
bad practice... check: https://stackoverflow.com/questions/53534894/is-it-a-bad-practice-to-use-jquery-in-angular — Akber Iqbal, Aug 02 '19 at 11:50

Rasidre · Answer 1 · 2019-12-11T14:15:41.503

Change your navbar.component.html to this:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <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="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown" [class.show]="navbarOpen">
              <a class="nav-link dropdown-toggle" (click)="toggleNavbar()">
                Dropdown Menu
              </a>
              <div class="dropdown-menu" [class.show]="navbarOpen" aria-labelledby="navbarDropdownMenuLink">
                <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>
        </div>
      </nav>

And in your navbar.component.ts write above the constructor:

public navbarOpen: boolean = false;

and under your constructor write:

public toggleNavbar() {
  this.navbarOpen = !this.navbarOpen;
}

Please NEVER use jQuery in Angular2+ Projects.
1. You don't need it
2. In my opinion it would be anti-pattern

If you do it like that, it should work. Give me some feedback whether it helped you.

score 0 · Answer 2 · answered Dec 19 '19 at 05:04

0

enter image description here and check it

answered Dec 19 '19 at 05:04

sudarshan gadekar

1

1

check the compatible bootstrap4 and jquery It's work fine on my side. – sudarshan gadekar Dec 19 '19 at 05:05
– sudarshan gadekar Dec 19 '19 at 05:05
Try to add above css and js file – sudarshan gadekar Dec 19 '19 at 05:06
I add these link then it works but If i download bootstrap and jquery using npm and then reference these in angular.json file.......... Then it is not working. Any help on this ? – GOPAL SHARMA Dec 23 '19 at 06:48
Add proper path from node module of bootstrap and jquery in build array. – sudarshan gadekar Dec 23 '19 at 12:44
Can you please suggest a demo? – GOPAL SHARMA Dec 23 '19 at 12:55

score -1 · Answer 3 · edited Dec 26 '22 at 00:11

This code works fine

import {
      Directive,
      ElementRef,
      HostBinding,
      HostListener,
      , Renderer2
    } from '@angular/core';
    
    @Directive({
      selector: '[appToggleMenu]'
    })
    export class ToggleMenuDirective {
    
      @HostBinding('class.show') isToggle: boolean = false;
      constructor(
        private el: ElementRef,
        private render: Renderer2
      ) { }
      @HostListener('click') toggleClick() {
    
        this.isToggle = !this.isToggle;
        const ui = this.el.nativeElement.querySelector('.dropdown-menu');
        if (ui) {
    
          if (this.isToggle) {
            this.render.addClass(ui, 'show')
          } else {
            this.render.removeClass(ui, 'show');
          }
        }
    
      }
    }

html:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid ">
        <a class="navbar-brand" href="#">Navbar</a>
        <div>
            <button class="navbar-toggler" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav" appToggleMenu>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" role="button">
                            Dropdown link
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</nav>

enter image description here

While this code may answer the question, might you please [edit] your answer to explain why and how it works, and what the wrong with the code in the original question? Doing so would improve your answer's long term value. For more, see [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). Thanks! — dbc, Dec 26 '22 at 00:13
I never use the bootstrap script when I'm working with Angular — bejele, Dec 27 '22 at 10:21
Or use from event click the item on the drop-down menu and put ngif on the list, you must use it to open and close the menu through a boolean value that becomes true and false. or use the directive. — bejele, Dec 27 '22 at 10:21
When you add the show class to the dropdown-menu class tag, the menu stays open, that's why you have to toggle the show class in the directive and you do this with @HostListener. Apart from that, when you put the selector directive on the div tag, you must access the tag that has the dropdown-menu class. To apply the changes on it, we use querySelector for this reason — bejele, Dec 27 '22 at 10:29

Navbar not working with Angular8 and Bootstrap4

3 Answers3