Angular JS 2 - Bootstrap navbar dropdown not working

Question

I am using angular 2 (created project using cli) and installed bootstrap.

Then added the bootstrap CSS to angular-cli.json then the styling works but when i have the navbar with dropdown menus its not opening them. I thought is due to missing the bootstrap.js then added that in scripts section of angular-cli.json, it complained about jquery!! then added that.

It started working but i am not sure what I am doing is right.

pasting the angular-cli.json for reference.

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": ["./js/jquery.js",     "../node_modules/bootstrap/dist/js/bootstrap.js"],

Solution 1

I would suggest using a library that provides a native integration of Angular 2 with Bootstrap. The https://ng-bootstrap.github.io library has excellent API and is easy to use. The good news is that it also has support for dropdowns as demonstrated here: https://ng-bootstrap.github.io/#/components/dropdown

With the mentioned library you don't need to install jQuery nor Bootstrap's JS (you need CSS only) and dropdowns are super-easy to use (notice the ngbDropdown and ngbDropdownToggle directives):

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

And hey, there is even a live example for you: http://plnkr.co/edit/mSV1qxTwLgL55L1kWmd9?p=preview

Solution 2

I went through the ng2-bootstrap documentation. Did not see that the navbar was completed yet. Will refactor when I see it.

However, I did come across a very simple tutorial that does not require you to use jquery. https://medium.com/@ct7/the-simple-way-to-make-a-mobile-angular-2-bootstrap-navbar-without-jquery-d6b3f67b037b

Notice that the author puts in a reference to a media query

  @media(min-width: 768px){...}

If you already have bootstrap css style link this is not necessary.
went to my navbar component and added the necessary property and click handler

  isIn = false;

 toggleState() { // click handler for navbar toggle
    const bool = this.isIn;
    this.isIn = bool === false ? true : false;
 }

Added the click handler on the navbar html template

 <button type="button" class="navbar-toggle" aria-expanded="false" aria-controls="navbar" (click)="toggleState()">

Added ngClass to the div that I wanted to collapse

<div id="navbar" class="navbar-collapse collapse"
  [ngClass]="{'in':isIn}">

Comments

[user1342558]

Thank you so much for your time and example. But requirement is to build a nav bar, seems its not that easy as native bootstrap.Please correct me if i am wrong.

[pkozlowski.opensource]

@user1342558 I would say that this is even easier to do a navbar, for example: plnkr.co/edit/4GJl2bBLsjHGhEjn48hx?p=preview

[Nikhil Das Nomula]

It looks like this is for angular 4 and bootstrap 4 which is still in alpha. Can you point us to an angular2 bootstrap 3 solution?