user1342558 user1342558 - 29 days ago 29
jQuery Question

Angular JS 2 - Bootstrap navbar dropdown not working

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"],

Answer

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