Angular Firebase Remote Config Provider for NG-CONFIG

Google Firebase Remote Config integration of DagonMetric/ng-config for Angular applications.

Get Started

Installation

npm

npm install @dagonmetric/ng-config @dagonmetric/ng-config-firebase-remote-config

or yarn

yarn add @dagonmetric/ng-config @dagonmetric/ng-config-firebase-remote-config

Latest npm package is

Module Setup (app.module.ts)

import { ConfigModule } from '@dagonmetric/ng-config';
import { FirebaseRemoteConfigProviderModule } from '@dagonmetric/ng-config-firebase-remote-config';

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

    // ng-config modules
    ConfigModule.configure(true, {
      debug: true
    }),
    FirebaseRemoteConfigProviderModule.configure({
        firebaseConfig: {
            apiKey: '<your_firebase_api_key>',
            projectId: 'your_firebase_project_id',
            appId: 'your_firebase_app_id'
        },
        remoteConfigSettings: {
            minimumFetchIntervalMillis: 43200000
        },
        prefix: 'myAppPrefix_'
    })
    // And additional config provider imports...
  ]
})
export class AppModule { }

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);
    });
  }
}

Edit app.component.ts in stackblitz

Samples

• Demo app view source / live edit in stackblitz

Related Projects

• ng-config - The core configuration & options service for Angular applications
• ng-log - Vendor-agnostic logging, analytics and telemetry service abstractions and some implementations for Angular applications
• ng-log-firebase-analytics - Firebase Analytics implementation for ng-log
• 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.