Create dynamic provider in angular

Question

In my angular project I provide a configuration object using a function like this:

@NgModule({
  imports: [CommonModule, UrlModule, I18nModule, RouterModule],
  providers: [
    provideConfig(defaultConfig),
    provideConfig(
        ...
    ),
  ],
  declarations: [MobileBottomComponent],
  entryComponents: [MobileBottomComponent],
  exports: [MobileBottomComponent],
})
export class CheckoutProgressMobileBottomModule {}

The function is exported from a dedicated module and looks like this:

export function provideConfig(config: any = {}): Provider {
    return {
      provide: DefaultConfigChunk,
      useValue: config,
      multi: true,
    };
  }
  
  @NgModule({
    declarations: [],
    imports: [
      CommonModule
    ]
  })
  export class GroceryConfigModule { }

And the configuration object looks like this:

export const defaultConfig: CheckoutConfig = {
    checkout: {
      steps: [
        {
            ...
        },
        {
            ...
        },
        {
            ...
        },
      ],
    },
  };
  

The problem is that I want to somehow dynamically provide this config object based on different actions in the app. For example, if the user is logged in I want to provide another config object. How can be this achieved?