How to add ngbDropdown to bootstrap 4 navbar

Question

I use ng-bootstrap Angular 2.

    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> 
        <ul class="nav navbar-nav">  
           <li class="nav-item">
                <a class="nav-link" href="#">About</a>
           </li>
            <li class="nav-item">
                <div ngbDropdown>
                  <button class="btn" ngbDropdownToggle>Projects</button>
                  <div class="dropdown-menu">
                    <button class="dropdown-item"  >AA</button>
                  </div>
                </div>
            </li>
        </ul>
     </nav>

The problems "dropdown-menu" could not be expanded

Solution

It is hard to see what is going on in your particular project as I've just did copy & paste of your code and it works perfectly fine, check this plunker: http://plnkr.co/edit/CFntB5mkshJ97x1aIGU1?p=preview

You might want to verify if you properly importing (import {NgbModule} from '@ng-bootstrap/ng-bootstrap') adding the NgbModule module:

@NgModule({ imports: [ BrowserModule, NgbModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {}

Comments

[morphatic]

This kinda solves my problem, but I thought the whole point of using ng-bootstrap was that you didn't have to include jQuery...

[Rahul Tapali]

It is not working. In plunker also you added stylesheet link of bootstrap 4. Why is it needed when you are installing bootstrap module ?