ngx-bootstrap: Dropdown not working

Hello, I’m trying to make a standard navbar works (https://getbootstrap.com/components/#navbar) I have installed bootstrap-ngx with angular-cli.

my app.module.ts import { AlertModule } from 'ngx-bootstrap'; import { CollapseModule } from 'ngx-bootstrap'; import { BsDropdownModule } from 'ngx-bootstrap'; ... imports: [ AlertModule.forRoot(), CollapseModule.forRoot(), BsDropdownModule.forRoot() ],

Still, dropdown not showing, and no error in console… what am I missing ?

Thank you !

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (3 by maintainers)

Most upvoted comments

This worked for me using a navbar.

<li class="dropdown" dropdown>
    <a href dropdownToggle (click)="false" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul *dropdownMenu class="dropdown-menu">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li role="separator" class="divider" dropdown-divider></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>
</li>

+17

joeangry on Jun 4, 2017

Mine was not working due to bootstrap3 vs bootstrap4 confusion. When using bootstrap4, definitely verify all the steps shown here: https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap4.md When these steps are not completed, ngx-bootstrap will not properly change the classes of the btn-group. Bootstrap4 needs to see a “show” class added, but ngx-bootstrap was only adding an “open” class. After applying all the bootstrap4 steps it’s working. Both classes are added: “open show”

pandachris on Jul 13, 2017

Hi, i confirm the dropdown doesn’t works with “a” tag, but works well with button. regards

cyberbobjr on Jun 1, 2017

Have you tried adding the code from demo to your template? I just don’t see any actual initialization of dropdown in the piece of code you’ve provided Try to add the following code to your template

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

IlyaSurmay on May 31, 2017

This worked for me using a navbar.

<li class="dropdown" dropdown>
    <a href dropdownToggle (click)="false" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul *dropdownMenu class="dropdown-menu">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li role="separator" class="divider" dropdown-divider></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>
</li>

This code works, I have tried with all the examples in the official ngx bootstrap and no one works, so thanks @joeangry for your help.

demesajorge on May 21, 2020

I tried changing the version of ngx Bootstrap to 4.0.1 and it worked for me Command I executed : npm install ngx-bootstrap@4.0.1 --save

ManideepInnamuri on Apr 29, 2020