No provider for NgbDropdown with Angular Bootstrap

Question

I am attempting to use the NbgDropdown in an app and I get the following error:

NullInjectorError: No provider for NgbDropdown!

My app.module file looks as follows:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...

NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        NgbModule.forRoot()
    ],
    providers: [
        ...
    ],
    bootstrap: [AppComponent]
})

From other answers, this looks like what should be required

I saw the following terse comment that might help, but it is not meaningful to me:

https://stackoverflow.com/a/46636887/2178363

Check the official example here: https://stackblitz.com/angular/kopbjmkbmabn?file=app%2Fapp.module.ts — robert, Feb 21 '19 at 20:55
So, is the trick that the menu needs to be its own component? I am attempting to put the code in app.component.html and then hit the problem. — Jason K., Feb 21 '19 at 21:05
try clearing 'npm cache clean --force' then delete 'package.lock' and do 'npm install' — Suresh Kumar Ariya, Feb 21 '19 at 21:13

O.O · Answer 1 · 2020-01-09T14:52:25.880

65

Make sure your HTML markup has the ngbDropdown attribute on ngbDropdownToggle and ngbDropdownMenu parent.

<div ngbDropdown> <!-- **here** -->
  <button class="btn btn-outline-primary" 
      id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu>
    <button ngbDropdownItem>Action - 1</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem>Something else is here</button>
  </div>
</div>

edited Jan 09 '20 at 14:52

answered Aug 05 '19 at 17:34

O.O

11,077
18
94
182

YES, we cannot have ngbDropdownMenu or ngbDropdownToggle component without a parent ngbDropdown component. https://github.com/ng-bootstrap/ng-bootstrap/issues/1860#issuecomment-348628942 – Bilal Feb 11 '22 at 13:19

score 2 · Answer 2 · answered Feb 21 '19 at 21:23

As provided by @robert, with the official example, the issue is that the pulldown menu html must not be directly in the app.component.html. If placed there, the stated error appears.

I am not sure if placing the pulldown menu html in its own component is the only solution, but it is the difference between working and not working for my situation. I was unable to place the content found in the dropdown-basic.html into the app.component.html without encountering the issue.

I would suggest to the authors of angular bootstrap that the required usage be placed directly in the documentation. As it is now, it is not explicit. The official example simply appears as one way to use the code.

No provider for NgbDropdown with Angular Bootstrap

2 Answers2

Linked