ngx-bootstrap 7: BsDropdownModule error TS2554: Expected 0 arguments, but got 1

Question

In my Angular app, I use ngx-bootstrap version 6.x, when trying to update to 7.x I get the following error:

Error: Error: src/app/app.module.ts:41:30 - error TS2554: Expected 0 arguments, but got 1.

41     BsDropdownModule.forRoot({ isAnimated: false, autoClose: true }),

how am I supposed to set the configuration for the BsDropdownModule in version 7.x?

Answer 1

According to BsDropdownModule, forRoot() doesn't have argument.

Hence, you have to remove the argument from BsDropdownModule.forRoot().

To override the default BsDropdownState value, you have to inject BsDropdownConfig to providers for AppModule or Component.

import { BsDropdownConfig, BsDropdownModule } from 'ngx-bootstrap/dropdown';

export const BS_DROPDOWN_CUSTOM = {
  isAnimated: false,
  autoClose: true
};

@NgModule({
  imports: [
    BsDropdownModule.forRoot()
  ],
  providers: [
    {
      provide: BsDropdownConfig,
      useValue: BS_DROPDOWN_CUSTOM
    }
  ]
})
export class AppModule {}

Sample Solution on StackBlitz

---

Note: You may not need to inject BsDropdownConfig into providers as the default value (BsDropdownState) is the same as your provided config.

bs-dropdown.module.ts

export class BsDropdownModule {
  static forRoot(): ModuleWithProviders<BsDropdownModule> {
    return {
      ngModule: BsDropdownModule,
      providers: [
        ComponentLoaderFactory,
        PositioningService,
        BsDropdownState
      ]
    };
  }
}

bs-dropdown.state.ts

export class BsDropdownState {
  direction: 'down' | 'up' = 'down';
  autoClose = true;
  insideClick = false;
  isAnimated = false;

  ...
}