Bootstrap dropdown using ngx-bootstrap

Question

I would have installed ngx-bootstrap in angular2 by using below command npm install ngx-bootstrap bootstrap --save

included below lines in angular-cli.json

 "../node_modules/bootstrap/dist/css/bootstrap.min.css".

In app.component.html added below lines

  <div  class="dropdown">
     <a class="pull-right text-center btn btn-setting dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"><i class="fa fa-cog"></i></a>
     <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation">  <a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-cog"></i>Settings</a></li>
     </ul>                                      
  </div>

Above code is not working for bootstap dropdown But dropdown menu is not working.pls help me.

My package.json is

{
 "name": "offline-new",
 "version": "0.0.0",
 "license": "MIT",
 "angular-cli": {},
 "scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
 },
"private": true,
"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"@types/hammerjs": "^2.0.35",
"angular2-drag-scroll": "^1.4.4",
"angular2-fontawesome": "^0.9.3",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jsstore": "^1.2.6",
"ng2-materialize": "^1.3.2",
"ngx-bootstrap": "^2.0.0-beta.8",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
 },
 "devDependencies": {
"@angular/cli": "^1.5.0",
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
}

Thanks

Answer 1

Did you add this in your app.module.ts ??

import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
@NgModule({
  imports: [BsDropdownModule.forRoot(),...]
})
export class AppModule(){}

also update your app.component.html to

<div  class="dropdown" dropdown>
    <a dropdownToggle class="pull-right text-center btn btn-setting dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"><i class="fa fa-cog"></i></a>
    <ul *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation">  <a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-cog"></i>Settings</a></li>
    </ul>
</div>