My bootstrap dropdown class is not able to display the dropdown menu

Question

I have added the following code in my HTML file for implementing the bootstrap dropdown, But I am not able to see the dropdown.

HTML file

      <div class="tools text-muted d-flex justify-content-around mr-4">
        <div class="pr-3 border-right">Filter</div>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Filter
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
        <fa-icon class="pr-3" [icon]="faChevronDown"></fa-icon>
      </div>
      <button type="button" class="btn btn-warning">Register</button>
    </div>

I have added the bootstrap in angular.json styles array too:

 "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "src/assets/js/custom.js"
            ]

I am not bale to see the dropdown menu here, I am able to see the button but not the dropdown menu.

Does it appear in browser inspector? please post link to full code in order to reproduce. — Ahed Kabalan, May 25 '20 at 17:07
I am using the bootstrap dropdown class here. But when I click the button, I do not see the dropdown. The bootstrap class appears in the browser inspector — RIDDHI DEBNATH, May 25 '20 at 17:37
It looks good, can you add a link example so we can reproduce the issue? — Ahed Kabalan, May 25 '20 at 17:41

score 0 · Answer 1 · answered May 25 '20 at 22:17

0

it works for me when i simply added the CDN file links to my HTML document ( without using anything else)

answered May 25 '20 at 22:17

Med Okl

74
7

score 0 · Accepted Answer · answered May 25 '20 at 22:31

Bootstrap's dropdowns require Popper.js. I don't know if you have added it in your dependencies in the package.json, but if you don't, add it there or add it via npm install. You can have a look here. If you have installed Popper.js, your angular.json should look like this:

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
  ]
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "src/assets/js/custom.js"
  ]

Thanks! Adding popper.js in the scripts and installing it worked for me. many thanks to you! — RIDDHI DEBNATH, May 26 '20 at 09:33

My bootstrap dropdown class is not able to display the dropdown menu

2 Answers2