Angular JS 2 - Bootstrap download dropdown not working

Question

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

Then bootstrap CSS is added to angular-cli.json, then the style works, but when I have a navigation bar with drop-down menus, it doesn't open them. I thought due to a lack bootstrap.js, and then added that in the scripts section of angular-cli.json he complained about jquery !! then added that.

It started working, but I'm not sure what I'm doing right.

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

, Angular 2 Bootstrap. https://ng-bootstrap.imtqy.com API . , , : https://ng-bootstrap.imtqy.com/#/components/dropdown

jQuery Bootstrap JS ( CSS), ( ngbDropdown ngbDropdownToggle ):

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

, : http://plnkr.co/edit/mSV1qxTwLgL55L1kWmd9?p=preview

Answer 2

ng2-bootstrap. , . , .

, jquery. https://medium.com/@ct7/the-simple-way-to-make-a-mobile-angular-2-bootstrap-navbar-without-jquery-d6b3f67b037b

, -

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

bootstrap css, .
navbar

  isIn = false;

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

html navbar

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

ngClass div,

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

Answer 3

, , . JQuery Angular . bcz bootstrap.js domy, .

But I recommend using the ng2-bootstrap module, which will allow you to access the Bootstrap components that are already written for the angular2 method, here you can also find your Dropdown .

Answer 4

You can simply copy and paste these links into 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>