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.
NgbModule has to be imported within the separate module as well. Credits: HaveSpacesuit
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With