Ng bootsrap import does not work angular 6

bootstrap not working in angular 7
ng-bootstrap table
angular bootstrap javascript not working
ng-bootstrap tooltip
ngx-bootstrap
ng-bootstrap package json
install bootstrap 4 in angular 6
ng-bootstrap/ng-bootstrap modal

I am trying to import NgbDropdown in my component, but i always get error?

I have tried like this

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

But i got this

AppointmentsComponent.html:3 ERROR Error: StaticInjectorError(AppModule)[NgbDropdownMenu -> NgbDropdown]: 

Does anybody have solution?

did you import ng-bootstrap into the app.module?

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

    @NgModule({
      ...
      imports: [NgbModule, ...],
declarations: [AppComponent, NgbdDropdownBasic],
      ...
    })
    export class YourAppModule {
    }

See you here: Stackblitz- example Dropdown

What is the difference between "ng-bootstrap" and "ngx-bootstrap , will take a string which is way easier to use. bootstrap-select does not work with Angular 5 built with the Angular CLI. Create new application using Angular CLI using ng new. Using npm install jquery 1.11.3, bootstrap 3.3.7, and bootstrap-select. Install related @types using --save-dev option.

Did you import the NgbDropdownModule in your corresponding module?

Please add this code to your module where the AppointmentsComponent is declared:

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

@NgModule({
    declarations: [
        ...,
        NgbDropdownModule
    ],...

Also have included NgbModule in app.module.ts imports section: NgbModule.​forRoot(); When i try to use any of ng-bootstrap components (like  I can confirm that this issue is because of bootstrap 4. I am using angular 6 and was trying to include bootstrap v4 it wasn't showing up and then I downgraded to bootstrap v3 and it works like a charm. Simply use the command npm install bootstrap@3 --save to downgrade to bootstrap v3

You'll need to add this into your app.module.ts:

imports: [
  NgbModule.forRoot()
]

That will allow the NgbDropdown to work.

and, in your component, add this:

providers: [
  NgbDropdown
]

For Angular 6 and higher you can use this solution. Go to styles.css and add this line @import "~bootstrap/dist/css/bootstrap  Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem. No dependencies on 3rd party JavaScript. As simple as Angular & Bootstrap CSS. If you know Angular, you also know ng-bootstrap. All code is tested with almost 100% coverage, all changes are meticulously reviewed.

NG Bootstrap - Angular powered Bootstrap widgets Please check our demo site and the list of issues to see all the things x.x, 6.0.0, 4.0.0. 3. At the time of writing this tutorial, Angular 9 is still in pre-release, so we need to use the next tag to install it. Angular v9.0.0-rc.2 is installed.. Note: This will install the Angular 9 CLI globally on your system so depending on your npm configuration you may need to add sudo (for superuser access) in macOS and Linux or use a command prompt with admin access in Windows.

Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, 2.x.x, 6.0.0, 4.0.0. 3.x.x, 6.1.0, 4.0.0. 4.x.x, 7.0.0, 4.0.0. 5.x.x, 8.0.0, 4.3.1. 6. polyfill; Add bootstrap CSS/SCSS to your project (no javascript is required); Import Please, do not open issues for the general support questions as we want to keep GitHub  ASP.NET Forums / General ASP.NET / HTML, CSS and JavaScript / ng-bootstrap modal calendar picker is not working on Angular 6

Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, dropdown, pagination, popover, progressbar, rating, No dependencies on 3rd party JavaScript. If you know Angular, you also know ng-bootstrap. We are not cutting corners. Keyboard navigation and focus management work as expected. The doc on using ng-bootstrap on github fails to mention that a cdn call must be made in the index.html file else ng-bootstarp won't work. my cdn call below It doesn't work when this line is removed from index.html.

Comments
  • Yes i have added NgbModule in shared modul for root?
  • You have added NgbDropDown in declarations
  • Yes i have added NgbModule in shared modul for root?
  • Could you please provide more of your code in the question?
  • Yes i have added NgbModule in shared modul for root?
  • Updated the answer.