Bootstrap dropdown don't show items

Question

I use angular 12 for my project and I get a problem, my dropdown from bootstrap don't show a items My html code:

<nav class="navbar navbar-expand navbar-dark">
  <a class="navbar-brand" routerLink="/">
    <img src="assets/bot.png" alt="END Logo">
  </a>
  <div class="nav navbar-nav">
    <a class="nav-item nav-link" routerLink="/commands" routerLinkActive="active">
      <i class="fa fa-code" aria-hidden="true"></i>
    </a>
    <a class="nav-item nav-link" routerLink="/docs" routerLinkActive="active">
      <i class="fa fa-book" aria-hidden="true"></i>
    </a>
    <a class="nav-item nav-link" [href]="githubURL" routerLinkActive="active">
      <i class="fab fa-github" aria-hidden="true"></i>
    </a>
    <a class="nav-item nav-link" [href]="discordInvite" routerLinkActive="active">
      <i class="fab fa-discord"></i>
    </a>
  </div>
  <div class="nav navbar-nav ml-auto">
    <div *ngIf="!user">
      <a class="nav-item nav-link" routerLink="/login"><i class="fa fa-user" aria-hidden="true"></i> Login</a>
    </div>
    <div *ngIf="user">
      <div class="dropdown">
        <a class="nav-item nav-link dropdown-toggle"
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img [src]="user.displayAvatarURL"> {{ user.username }}
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" routerLink="/dashboard">Dashboard</a>
          <hr class="m-1">
          <a class="dropdown-item" routerLink="/logout">Logout</a>
        </div>
      </div>
    </div>
  </div>
</nav>

What I am doing wrong, and how to fix it?

Answer 1

SOLUTION 1

Bootstrap dropdown requires these 3 dependencies:

• jQuery
• popper.js
• Bootstrap

Step 1: Install these 3 dependencies into your Angular App with these commands:

npm install jquery
npm install popper.js
npm install bootstrap

Step 2: Add these .js files into angular.json scripts section so that these 3 .js files will be rendered into HTML.

angular.json

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

---

SOLUTION 2

Angular Bootstrap Dropdown is also suggested to fix the issue.

Step 1: Install Angular Bootstrap (NG Bootstrap).

npm install @ng-bootstrap/ng-bootstrap

Step 2: Add NgbModule into app.module.ts imports section.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [.., NgbModule],
  ..
})

Step 3: Apply Angular Bootstrap Dropdown directive to dropdown.

<div ngbDropdown class="nav-item">
  <a ngbDropdownToggle id="dropdownMenuButton" class="nav-link" aria-haspopup="true" aria-expanded="false"> 
    <img [src]="user.displayAvatarURL"> {{ user.username }}
  </a>
  <div ngbDropdownMenu aria-labelledby="dropdownMenuButton">
    <a ngbDropdownItem routerLink="/dashboard">Dashboard</a>
      <hr class="m-1">
    <a ngbDropdownItem routerLink="/logout">Logout</a>
  </div>
</div>

Sample solution on StackBlitz