user1342558 user1342558 - 1 year ago 318
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

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": [
"scripts": ["./js/jquery.js", "../node_modules/bootstrap/dist/js/bootstrap.js"],

Answer Source

I would suggest using a library that provides a native integration of Angular 2 with Bootstrap. The library has excellent API and is easy to use. The good news is that it also has support for dropdowns as demonstrated here:

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>

And hey, there is even a live example for you:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download