Configuration & Options Service for Angular

The ng-config is a configuration and options service for Angular applications with flexible api and extendable config providers.

Features

• mapType(key, MyOptionsClass) - map configuration values with options class
• mapObject(key, myOptionsObj) - map configuration values with options object
• getValue('myKey') - get the raw configuration section value
• reload() - reload the fresh configuration values from config providers
• valueChanges - configuration value changes event
• ConfigProvider - extendable config provider interface and multiple config providers are supported
• ConfigModule.configure(true, {...}) - load configuration automatically at app starts
• Latest version of Angular and compatible with server side rendering (SSR / Angular Universal)

Get Started

Installation

npm

npm install @dagonmetric/ng-config

or yarn

yarn add @dagonmetric/ng-config

Latest npm package is

Module Setup (app.module.ts)

import { ConfigModule } from '@dagonmetric/ng-config';
import { HttpConfigProviderModule } from '@dagonmetric/ng-config/http-config';

@NgModule({
  imports: [
    // Other module imports

    // ng-config modules
    ConfigModule.configure(true, {
      debug: true
    }),
    HttpConfigProviderModule.configure({
        endpoint: '/api/v1/configuration'
    }),
    // And additional config provider imports...
  ]
})
export class AppModule { }

Live edit app.module.ts in stackblitz

Usage

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

import { ConfigService } from '@dagonmetric/ng-config';

export class AppOptions {
  name = '';
  lang = '';
  logEnabled = false;
  logLevel = 0;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private readonly configService: ConfigService) {
    // Get with key
    const configValue = this.configService.getValue('key1'));
    console.log('value: ', configValue);

    // Get with options class
    const appOptions = this.configService.mapType('app', AppOptions));
    console.log('appOptions: ', JSON.stringify(appOptions));

    // Call reload to get the fresh config values from providers
    // this.configService.reload().subscribe(() => {
    //   console.log('Reloaded');
    // });

    // Configuration value change detection
    // This will only trigger when reload() is called and
    // any value changes
    this.configService.valueChanges.subscribe(() => {
      const latestValue = this.configService.getValue('key1'));
      console.log('latest value: ', latestValue);

      const lastestOptions = this.configService.mapType('app', AppOptions));
      console.log('lastest appOptions: ', lastestOptions);
    });
  }
}

Live edit app.component.ts in stackblitz

Samples & Documentations

• Demo app view source / live edit in stackblitz
• Documentation wiki ng-config wiki

Integrations

• ng-config-firebase-remote-config - Implements ConfigProvider for Firebase Remote Config

Related Projects

• ng-log - Vendor-agnostic logging, analytics and telemetry service abstractions and some implementations for Angular applications
• ng-cache - Caching service for Angular applications

Build & Test Tools

We use lib-tools for bundling, testing and packaging our library projects.

Feedback and Contributing

Check out the Contributing page.

License

This repository is licensed with the MIT license.