Runtime Reactive Configuration Handler for Angular

Install

npm i @deejayy/reactive-config

Define your configuration type

export class ConfigVars {
  public apiUrl!: string;
}

Add module to imports

imports: [
  ...
  ReactiveConfigModule.forRoot(ConfigVars, { configPath: '/assets/config-new.json' }),
],

Create configuration file with the fields defined in your type

/assets/config-new.json:

{
  "apiUrl": "http://localhost"
}

Use the config values from anywhere

Static variable: {{ apiUrl }}
Reactive variable: {{ apiUrl$ | async }}

public apiUrl: string = this.config.get('apiUrl'); // gets the latest value statically
public apiUrl$: Observable<string> = this.config.getStream('apiUrl'); // get values reactively with streams

constructor (private config: ReactiveConfigService<ConfigVars>) {}

Update the values runtime

<button (click)="updateVar()">change</button>

public updateVar() {
  this.config.set('apiUrl', 'new value');
}