4

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"],
Improve this question

4 Answers 4

Reset to default
5

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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.
@user1342558 I would say that this is even easier to do a navbar, for example: plnkr.co/edit/4GJl2bBLsjHGhEjn48hx?p=preview
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?
3

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}">
Improve this answer

Comments

0

yes may be it works for you, Sometime using Jquery with Angular may cause problem. bcz bootstrap.js may change dom element internaly, so it may cause some problem in some cases.

But i recommends you to use ng2-bootstrap module, which will allow your access Bootstrap components which are already written for angular2 way. here you can also find your Dropdown component.

Improve this answer

Comments

0

you can just copy and paste those links in the index.html

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.