ng-bootstrap ngbDropdown not working in angular 4
Solution 1
tl;dr; install Bootstrap 4 CSS.
ng-bootstrap requires Bootstrap 4 as documented on the "Getting Started" page. For some reason you've got "bootstrap-sass": "^3.3.7"
so it looks like you are mixing Bootstrap versions and might be using Bootstrap 3, effectively.
With the Bootstrap 4 CSS things work perfectly fine as shown on the demo page (and plunkers you can fork from it): https://ng-bootstrap.github.io/#/components/dropdown
Solution 2
@Philipp Just make a minor change to your HTML code:
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" ngbDropdownMenu>
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
ngbDropdownMenu is property added to "dropdown-menu" div.
Philipp Januskovecz
Updated on June 15, 2022Comments
-
Philipp Januskovecz almost 2 years
At my angular 4 application is the ngbDropdown-Element from ng-bootstrap not working.
I have installed the following npm modules for this case:
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "bootstrap": "4.0.0-alpha.6", "bootstrap-sass": "^3.3.7",
My app.module.ts is looking like this:
import { BrowserModule } from "@angular/platform-browser" import { NgModule } from "@angular/core"; import { FormsModule } from "@angular/forms"; import { HttpModule } from "@angular/http"; import { AppComponent } from "./app.component"; import { FileitHeaderComponent } from "./fileit-header/fileit-header.component"; import {TranslateModule} from "ng2-translate"; import { CCACampaignComponent } from "./cca-campaign/cca-campaign.component"; import {NgbModule} from "@ng-bootstrap/ng-bootstrap"; @NgModule({ declarations: [ AppComponent, FileitHeaderComponent, CCACampaignComponent ], imports: [ BrowserModule, FormsModule, HttpModule, TranslateModule.forRoot(), NgbModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
And in the CCA Campaign I am trying to use the Demo of ng-bootstrap:
<div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button> <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> <button class="dropdown-item">Action - 1</button> <button class="dropdown-item">Another Action</button> <button class="dropdown-item">Something else is here</button> </div> </div>
But the result of this code is unfortunately very bad:
and nothing happens when I click on it ...