Skip to content

DagonMetric/ng-config

Repository files navigation

Configuration & Options Service for Angular

GitHub Actions Status Azure Pipelines Status codecov Gitter

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 npm version

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

Integrations

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.

Lib Tools

Feedback and Contributing

Check out the Contributing page.

License

This repository is licensed with the MIT license.