ng-bootstrap ngbDropdown not working Angular 4
13,095
Solution 1
NgbModule has to be imported within the separate module as well. Credits: HaveSpacesuit
Solution 2
add ngb modules you use, NgbModule has to be imported....
@NgModule({
imports: [
..,
NgbModule.forRoot()
],
...
Solution 3
@Maddy Just make some minor change to your html code:
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBasic1" ngbDropdownMenu >
<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>
ngbDropdownMenu is property added to "dropdown-menu" div.
Author by
Maddy
Senior Software Engineer(Full Stack). From Colombo, Sri Lanka. Working in Tokyo,
Updated on June 25, 2022Comments
-
Maddy almost 2 years
ng dropdowns are not working.
Note: I followed the answer here and upgraded bootstrap to 4-alpha, yet it's not working.
Below is my package.json file:
"@angular/animations": "^4.3.0", "@angular/common": "^4.3.0", "@angular/compiler": "^4.3.0", "@angular/core": "^4.3.0", "@angular/forms": "^4.3.0", "@angular/http": "^4.3.0", "@angular/platform-browser": "^4.3.0", "@angular/platform-browser-dynamic": "^4.3.0", "@angular/router": "^4.3.0", "@angular/upgrade": "^4.3.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28", "@types/jquery": "^3.2.8", "angular-calendar": "^0.19.0", "angular2-ladda": "^1.2.1", "angular2-text-mask": "^8.0.2", "angular2-toaster": "^4.0.1", "animate.css": "^3.5.2", "bootstrap": "4.0.0-alpha.6"
html code:
<div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBasic1"> <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>
In my app.module.ts ngbModule is imported too.
import {NgbModule} from "@ng-bootstrap/ng-bootstrap"; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, NgbModule.forRoot() //more ]
Bootstrap buttons and text inputs working and all the styles are applied, except for dropdown isn't working on click.
Any input is much appreciated.