ngx-settings
Externalization for Angular apps. ngx-settings uses JSON configuration to manage runtime dependencies post deployment.
Installation
npm install ngx-settings --saveImport
Module
First step is to import NgxSettingsModule into your NgModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxSettingsModule } from 'ngx-settings';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxSettingsModule.forRoot({
settingsUrl: "https://jsonplaceholder.typicode.com/todos/1"
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Sample output from URL:
{
"apiKey": "abcd1234",
"credentials": {
"username": "johndoe",
"password": "pass"
}
}Usage
- Inject
NgxSettingsServiceinto the component class and use thegetmethod by passing in the key:
export class AppComponent {
apiKey: string;
username: string;
constructor(private settingsService: NgxSettingsService) {
this.apiKey = this.settingsService.get("apiKey"); // Output: "abcd1234"
this.username = this.settingsService.get("credentials.username"); // Output: "johndoe"
}
}- Use
NgxSettingsPipeby namesettingsKeyin the HTML template:
<div>{{"apiKey" | settingsKey}}</div><!-- Output: abcd1234 -->
<div>{{"credentials.username" | settingsKey}}</div><!-- Output: johndoe -->- Provide a default value in case the actual property is not available for any reason:
export class AppComponent {
apiKey: string;
constructor(private settingsService: NgxSettingsService) {
this.apiKey = this.settingsService.get("apiKey", "myDefaultKey"); // Output: "myDefaultKey"
}
}<div>{{"apiKey" | settingsKey:"myDefaultKey"}}</div><!-- Output: myDefaultKey -->
