Ngx-bootstrap: Dropdown not working

[GeRoHi]

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 !

[IlyaSurmay]

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>

[GeRoHi]

Actually have this is my navbar
<li class="dropdown"> <a dropdownToggle href="#" 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><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li>
Added *dropdownMenu directive to ul element and dropdownToggle to a, still not working.
Your dropdown however is working fine, thanks !

[cyberbobjr]

Hi,
i confirm the dropdown doesn't works with "a" tag, but works well with button.
regards

[GeRoHi]

Well, why is it defined with an a element on the official bootstrap website then ?

<li class="dropdown"> 
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
  <ul class="dropdown-menu"> 
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">One more separated link</a></li> 
  </ul> 
</li>

Is this a restriction due to the use of bootstrap-ngx ?

[Axel3232]

+1 same problem with a dropdown with a tag

[valorkin]

Dropdown doesn't prevent default behavior of a tag on click
Please use code from ngx-bootstrap demo pages, html you have provided is not valid

[GeRoHi]

So, maybe we can we overwrite onclick behavior of the a tag ? (click)='dropdown.toggle()' ?

[valorkin]

It depends on what you need, samples works fine with a tag. So I am not sure, what is not working
http://valor-software.com/ngx-bootstrap/#/dropdowns#single-button

[joeangry]

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>

[pandachris]

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"

[lucifer-AM]

@joeangry thanks it worked for me.

[cwienands1]

If you are using a navbar and an "a" element, (click)=false is the solution. Thanks @joeangry.

[masonmark]

If you find this old issue in 2019 because the dropdown is not working on an <a> tag but it is working on a <button> , try @joeangry 's solution verbatim. In my case (using Bootstrap 3) I initially copied and pasted the sample code from the documentation into my component, and it still didn't work.

I found I had to add the "dropdown" class to the outermost , like @joeangry's solution has, but the sample code does not, to make the dropdown appear.

[ManideepInnamuri]

I tried changing the version of ngx Bootstrap to 4.0.1 and it worked for me
Command I executed : npm install [email protected] --save

[demesajorge]

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.

[VjeraTurk]

The "Trigger by Tag " code in the official ngx bootstrap site (https://valor-software.com/ngx-bootstrap/#/dropdowns#anchor-trigger) is still not working @2020.
Guys, please add class="dropdown" into <span> to fix it while ngx team don´t release it.

The example on link still doesn't work for me if I switch from <span dropdown> to <span class="dropdown">