ng-bootstrap ngbDropdown not working in angular 4

12,320

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.

Share:
12,320
Philipp Januskovecz
Author by

Philipp Januskovecz

Updated on June 15, 2022

Comments

  • Philipp Januskovecz
    Philipp Januskovecz about 3 hours

    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:

    enter image description here

    and nothing happens when I click on it ...