CODEWITHSUNDEEP
angulartypescriptangular2-services
ufk
ufk

Reputation: 32104

using injectable service to set configuration of APP_BASE_HREF

I'm writing an angular 2.1.0 project with typescript 2.0.3.

I created an app-config service with the following code:

import { Injectable } from '@angular/core';

@Injectable()
export class AppConfigService {
  public config: any = {
    auth0ApiKey: '<API_KEY>',
    auth0Domain: '<DOMAIN>',
    auth0CallbackUrl: '<CALLBACK_URL>',
    appBaseHref: '/'
  }

  constructor() {}

  /* Allows you to update any of the values dynamically */
  set(k: string, v: any): void {
    this.config[k] = v;
  }

  /* Returns the entire config object or just one value if key is provided */
  get(k: string): any {
    return k ? this.config[k] : this.config;
  }
}

now I want to use that injectable service on my app-module.ts in order to set the APP_BASE_HREF provider.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppComponent } from './app/app.component';
import { HelpComponent } from './help/help.component';
import { WelcomeComponent } from './welcome/welcome.component';
import {APP_BASE_HREF} from "@angular/common";
import { MaterialModule } from "@angular/material";
import { AUTH_PROVIDERS }      from "angular2-jwt";
import { RouterModule }  from "@angular/router";
import {AppConfigService} from "app-config.service";

const appConfigService = new AppConfigService();    

@NgModule({
  declarations: [
    AppComponent,
    HelpComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot(),
    RouterModule.forRoot([
      { path: "",redirectTo:"welcome",pathMatch:"full"},
      { path: "welcome", component: WelcomeComponent },
      { path: "help",component: HelpComponent},
      { path: "**",redirectTo:"welcome"}
    ])
  ],
  providers: [AUTH_PROVIDERS,{provide: APP_BASE_HREF, useValue:appConfigService.get('appBaseHref')}],bootstrap: [AppComponent]
})
export class AppModule {
}

so here I initiate the class to a const and use it. is there a way to inject is in a cool and sexy way?

for example for my auth service I defined it in the constructor

constructor(@Inject(AppConfigService) appConfigService:AppConfigService)

is there a way to do a sexy thing here too? or just to leave it as is?

thanks

Upvotes: 5

Views: 3222

Answers (1)

Paul Samsotha
Paul Samsotha

Reputation: 209004

You could use a factory for the APP_BASE_REF

providers: [
  AppConfigService,
  {
    provide: APP_BASE_HREF,
    useFactory: (config: AppConfigService) => {
      return config.get('appBaseHref')
    },
    deps: [ AppConfigService ]
  }
]

Once you add the AppConfigService to the providers, it makes it injectable to both the factory and the auth service. This is generally how it should be done anyway. Later if say the AppConfigService needs some dependencies maybe, it will be handled through the injection system.

See Also:

Upvotes: 2

Related Questions