You probably have seen 'foorRoot()' method a lot inside Angular application.
Creating a configurable NgModule allows us do the configuration for each serivce.
// service module import { 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<FoodStoreConfig>('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: ` <div> Food Store ({{ (store | async)?.name }}) </div> ` }) export class AppComponent { store = this.foodService.getStore(); constructor(private foodService: FoodStoreService) {} }