ngx-bootstrap dropdown not opening angular 4 bootstrap 4

Question

I can't figure out what's going on here - I've included ngx-dropdown code that I believe is correct based on documentation:

home.component.html

    <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>

app.module.ts

@NgModule({
  imports: [
    BsDropdownModule.forRoot(),
    ...
    ]

site.module.ts (this is the module that contains the home component)

@NgModule({
  imports: [
    BsDropdownModule,

I'm using angular-cli and I've included the bootstrap style:

    "../node_modules/bootstrap/dist/css/bootstrap.min.css",

and in index.html I've added a snippet to let the browser know I'm using bootstrap 4:

<script>window.__theme = 'bs4';</script>
<app-root>Loading . . .</app-root>

The button appears, and there are no errors shown in the console. I can see the dom changing when I click the button ("open" and "show" are being added to the styles). But nothing below the button opens up - no menu is shown.

I don't know where else to look

why dont you use directives to add and remove classes for bootstrap drop down instead of using a extension . example link . check the nav bar — Rahul Singh
– Rahul Singh, Commented Aug 17, 2017 at 6:23

Matthias Schaffer · Accepted Answer · 2017-08-17 07:41:41Z

5

I have this problem too. After some wasted hours i found this:

It's an official issue:

https://github.com/valor-software/ngx-bootstrap/issues/2413

answered Aug 17, 2017 at 7:41

Matthias Schaffer

662 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Auguste · Accepted Answer · 2023-11-20 20:41:16Z

2

I had the same problem. After I import BrowserAnimationsModule from '@angular/platform-browser/animations';' to app.module.ts and add BrowserAnimationsModule to imports: [] the problem is resolved. With some unnecessary codes, you app.module.ts should look like below. I'm currently using Angular 9.0:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
 ...
},
 imports:[
  BrowserAnimationsModule,
  BsDropdownModule.forRoot()
 ],
 ....
})

edited Nov 20, 2023 at 20:41

answered Jun 6, 2020 at 20:27

Auguste

2,2092 gold badges22 silver badges28 bronze badges

Collectives™ on Stack Overflow

ngx-bootstrap dropdown not opening angular 4 bootstrap 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related