Dropdown doesn't work correctly. (Angular 8 and Boostrap)

Question

I'm having trouble displaying a dropdown and his options via the bootstrap directive 'ngbDropdown'.

Using this documentation example:

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <button ngbDropdownItem>Action - 1</button>
      <button ngbDropdownItem>Another Action</button>
      <button ngbDropdownItem>Something else is here</button>
    </div>
  </div>

Is displaying these:

I already imported the NgbDropdownModule and NgbModule at AppModule.

I'm using localy angular-cli : 8.3.26.

I think I've installed all the packages:

"@angular/animations": "^8.2.8"
"@angular/common": "^8.2.8"
"@angular/compiler": "^8.2.8"
"@angular/core": "^8.2.8"
"@angular/forms": "~8.2.8"
"@angular/platform-browser": "^8.2.8"
"@angular/platform-browser-dynamic": "^8.2.8"
"@angular/router": "^8.2.8"
"@ng-bootstrap/ng-bootstrap": "^5.3.1"
"bootstrap": "^4.3.1"
"core-js": "^3.6.5"
"ngx-alerts": "^4.0.0",
"ngx-bootstrap": "^5.4.0"
"rxjs": "~6.5.4"
"tslib": "^1.10.0"
"zone.js": "~0.9.1"

In the boostrap documentation: https://ng-bootstrap.github.io/#/components/dropdown/examples the stackblitz example is at version 9 and I must use version 8.

Some help? Grateful.

EDIT:

RESOLVED !

Need to import popper.js and jquery at the index.html, like this:

don't install bootstrap (only you need bootstrap.css). Normally you download bootstrap.min.css (save in a folder) and include it in the angular.json — Eliseo
really you needn't import jQuery.js nor popper.js. The aim of ngb-bootstrap is NOT import jQuery and NOT import bootstrap.js, and you're doing exactly the opposite of it, remove jQuery, remove popper and remove the line bootstrap:4.3.1. must be work — Eliseo

Paul Brissaud Paul Brissaud · Accepted Answer · 2020-04-22T16:50:27

Can you try something like this ? My code was written in Angular 8 with the ng-bootstrap version 5.x and it works even on Angular 9 / ng-bootstrap 6.x

<div ngbDropdown #myDrop1="ngbDropdown" class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownAnchor (focus)="myDrop1.open()">Toggle dropdown</button>
    <div class="dropdown-menu" ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <button class="dropdown-item" ngbDropdownItem>Action - 1</button>
      <button class="dropdown-item" ngbDropdownItem>Another Action</button>
      <button class="dropdown-item" ngbDropdownItem>Something else is here</button>
    </div>
</div>

Dropdown doesn't work correctly. (Angular 8 and Boostrap)

1 Answers