Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add ngbDropdown to bootstrap 4 navbar

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

like image 369
Kery Hu Avatar asked Sep 16 '16 11:09

Kery Hu


People also ask

How do I add a form to a dropdown in bootstrap?

Basic Dropdown To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. Add the . dropdown-menu class to a <div> element to actually build the dropdown menu.

Which key is used to add separator bar in drop down menu?

Press Alt+A. The separator is added to the list of buttons on the Quick Access Toolbar and the focus is on the separator. (Move Down) button depending on where you want to move the separator.


1 Answers

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 {}

like image 77
pkozlowski.opensource Avatar answered Nov 14 '22 21:11

pkozlowski.opensource