You probably have seen 'foorRoot()' method a lot inside Angular application.

Creating a configurable NgModule allows us do the configuration for each serivce.

// service moduleimport { NgModule, ModuleWithProviders, Provider } from '@angular/core';import { CommonModule } from '@angular/common';import { HttpModule } from '@angular/http';import { FOOD_STORE_CONFIG, FoodStoreConfig } from './config';import { FoodStoreService } from './food-store.service';export const FOOD_PROVIDERS: Provider[] = [  FoodStoreService];@NgModule({  imports: [    CommonModule,    HttpModule  ]})export class FoodStoreModule {  static forRoot(config: FoodStoreConfig): ModuleWithProviders {    return {      ngModule: FoodStoreModule,      providers: [        ...FOOD_PROVIDERS,        {          provide: FOOD_STORE_CONFIG,          useValue: config        }      ]    };  }}

 

import { InjectionToken } from '@angular/core';export interface FoodStoreConfig {  storeId: number,  storeToken: string}export const FOOD_STORE_CONFIG = new InjectionToken
     
      ('FOOD_STORE_CONFIG');
     

 

Then in the app.module.ts:

imports: [    BrowserModule,    HttpModule,    FoodStoreModule.forRoot({      storeId: 10292,      storeToken: 'eca938c99a0e9ff91029dc'    })  ],

 

Now the 'FoodStoreService' can be used any where inside our application:

// app.component.ts@Component({  selector: 'app-root',  template: `    
     
            Food Store ({
    { (store | async)?.name }})    
     
  `})export class AppComponent {  store = this.foodService.getStore();  constructor(private foodService: FoodStoreService) {}}