ng-bootstrap ngbDropdown not working Angular 4

Question

ng dropdowns are not working.

Note: I followed the answer here and upgraded bootstrap to 4-alpha, yet it's not working.

Below is my package.json file:

    "@angular/animations": "^4.3.0",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/router": "^4.3.0",
    "@angular/upgrade": "^4.3.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
    "@types/jquery": "^3.2.8",
    "angular-calendar": "^0.19.0",
    "angular2-ladda": "^1.2.1",
    "angular2-text-mask": "^8.0.2",
    "angular2-toaster": "^4.0.1",
    "animate.css": "^3.5.2",
    "bootstrap": "4.0.0-alpha.6"

html code:

<div ngbDropdown class="d-inline-block">
                <button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBasic1">
                    <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>

In my app.module.ts ngbModule is imported too.

import {NgbModule} from "@ng-bootstrap/ng-bootstrap";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule.forRoot()
//more
]

Bootstrap buttons and text inputs working and all the styles are applied, except for dropdown isn't working on click.

Any input is much appreciated.

Is your component declared in app.module.ts or in a separated module? If its a separate module, you'll need to import and export NgbModule as well. — HaveSpacesuit, Jul 17 '17 at 14:30
@HaveSpacesuit my component is in a separate module and yeah I adding Ngb to that module worked! thanks. Can you tell me why it's not applied to other modules when it's imported to root? I'm sorry, I'm fairly new to ng. — Maddy, Jul 18 '17 at 04:20
@Maddy with Angular you have to import directives in _every_ module where you want to use those directives. — pkozlowski.opensource, Jul 18 '17 at 09:03

score 23 · Accepted Answer · answered Jul 27 '17 at 06:02

23

NgbModule has to be imported within the separate module as well. Credits: HaveSpacesuit

answered Jul 27 '17 at 06:02

Maddy

2,114
7
30
50

score 4 · Answer 2 · answered Sep 26 '18 at 09:52

4

add ngb modules you use, NgbModule has to be imported....

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

answered Sep 26 '18 at 09:52

mykil

41
2

score 3 · Answer 3 · answered Oct 17 '17 at 14:55

@Maddy Just make some minor change to your html code:

<div ngbDropdown class="d-inline-block">
                <button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBasic1" 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.

ng-bootstrap ngbDropdown not working Angular 4

3 Answers3

Linked