Why is the dropdown menu on my button not working?

Question

i'm trying to setup a basic button in my angular application where it shows a dropdown menu with different options whenever i click on it.

i copy pasted some boostrap template code and changed some of the classes to match the look of my application, however, when i click on the button it does not show the dropdown menu.

here's the code for the button in question

      <div class="list-group list-group-flush ">
        <div class="Dropdown">
          <a routerLink="/homepage/facture" role="button" class="list-group-item list-group-item-action element-red dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only" id="dropdownMenuLink"></span>Gestion Facture</a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
              <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>


these are my styles and scripts in the angular.json file 

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

Answer 1

Bootstrap v4 require popper.js before bootstrap.js

"styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],

"scripts": [
          "./node_modules/jquery/dist/jquery.js",
          "./node_modules/popper.js/dist/umd/popper.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.js"
        ]