CODEWITHSUNDEEP
angulardropdownngx-bootstrap
Tchiko
Tchiko

Reputation: 153

NullInjectorError: No provider for BsDropdownConfig

I want to use the ngx-bootstrap dropdown, so i've import the lib in the app.module

BsDropdownModule.forRoot(),

and in my html, i want to try the example found in the documentation

<div class="btn-group" dropdown>
        <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
                aria-controls="dropdown-basic">
          Button dropdown <span class="caret"></span>
        </button>
        <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
            role="menu" aria-labelledby="button-basic">
          <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </div>

And i got this error in the console :

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[BsDropdownDirective -> BsDropdownConfig]: 
  StaticInjectorError(Platform: core)[BsDropdownDirective -> BsDropdownConfig]: 
    NullInjectorError: No provider for BsDropdownConfig!
NullInjectorError: StaticInjectorError(AppModule)[BsDropdownDirective -> BsDropdownConfig

i've tried to import the BsDropdownConfig but it not a module.

is there any think that i must import ?

Upvotes: 0

Views: 2739

Answers (2)

ajit deshmukh
ajit deshmukh

Reputation: 131

I found out that I need to add the below dependency that is required.

 "ngx-bootstrap":"", //mention version compatable with your angular version 
  "ngx-intl-tel-input": "",
  "intl-tel-input",
  "google-libphonenumber"

please add this dependency inside package.json file with corresponding version run the command : npm install after that import the NgxIntlTelInputModule module

imports: [
    NgxIntlTelInputModule,
],

And add the theme for ngx input in angular.json file

//keep your existing theme dont remove that.
     "styles": [
                 "", 
                 "./node_modules/intl-tel-input/build/css/intlTelInput.css"
               ],

If you have not added intlTelInput.css theme the country dropdown will not work only text input field diplay.

Upvotes: 0

OctavianM
OctavianM

Reputation: 4617

Apparently there is no default config provided by the BsDropdownModule, which is odd, but you can manually provide one, either in the root module injector (in the providers array), or in the component's own injector using

providers: [{ provide: BsDropdownConfig, useValue: { autoClose: true } }]

Upvotes: 3

Related Questions