Skip to content
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

128 lines (103 sloc) 5.17 KB

Getting started with Remote Config β

AngularFireRemoteConfig dynamically imports the firebase/remote-config library on demand, provides convenience observables, pipes, and a promisified version of the Firebase Remote Config SDK (firebase.remoteConfig.RemoteConfig).


class AngularFireRemoteConfigModule { }

interface ConfigTemplate {[key:string]: string|number|boolean}

type Parameter extends remoteConfig.Value {
  key: string,
  fetchTimeMillis: number

class AngularFireRemoteConfig {
  changes:    Observable<Parameter>;
  parameters: Observable<Parameter[]>;
  numbers:    Observable<{[key:string]: number|undefined}>  & {[key:string]: Observable<number>};
  booleans:   Observable<{[key:string]: boolean|undefined}> & {[key:string]: Observable<boolean>};
  strings:    Observable<{[key:string]: string|undefined}>  & {[key:string]: Observable<string|undefined>};
  // from firebase.remoteConfig() proxy:
  activate: () => Promise<boolean>;
  ensureInitialized: () => Promise<void>;
  fetch: () => Promise<void>;
  fetchAndActivate: () => Promise<boolean>;
  getAll: () => Promise<{[key:string]: remoteConfig.Value}>;
  getBoolean: (key:string) => Promise<boolean>;
  getNumber: (key:string) => Promise<number>;
  getString: (key:string) => Promise<string>;
  getValue: (key:string) => Promise<remoteConfig.Value>;
  setLogLevel: (logLevel: remoteConfig.LogLevel) => Promise<void>;
  settings: Promise<remoteConfig.Settings>;
  defaultConfig: Promise<{[key: string]: string | number | boolean}>;
  fetchTimeMillis: Promise<number>;
  lastFetchStatus: Promise<remoteConfig.FetchStatus>;

// Pipes for working with .changes and .parameters
filterRemote: () => MonoTypeOperatorFunction<Parameter | Parameter[]>
filterFresh: (interval: number) => MonoTypeOperatorFunction<Parameter | Parameter[]>
budget: <T>(interval: number) => MonoTypeOperatorFunction<T>

// scanToObject is for use with .changes
scanToObject: () => OperatorFunction<Parameter, {[key: string]: string|undefined}>

// mapToObject is the same behavior are scanToObject but for use with .parameters,
mapToObject: () => OperatorFunction<Parameter[], {[key: string]: string|undefined}>

SETTINGS = InjectionToken<remoteConfig.Settings>;
DEFAULTS = InjectionToken<ConfigTemplate>;

Configuration with Dependency Injection

Configure Remote Config with SETTINGS

Using the SETTINGS DI Token (default: {}) will allow you to configure Firebase Remote Config.

Configure default values with DEFAULTS

Providing DEFAULTS ({[key: string]: string | number | boolean}) has AngularFireRemoteConfig emit the provided defaults first, which allows you to count on Remote Config when the user is offline or in environments that the Remote Config service does not handle (i.e, Server Side Rendering).

Putting it all together:

  imports: [
  providers: [
    { provide: DEFAULT_CONFIG, useValue: { enableAwesome: true } },
      useFactory: () => isDevMode() ? { minimumFetchIntervalMillis: 10_000 } : {}
export class AppModule { }


constructor(remoteConfig: AngularFireRemoteConfig) {
    filterFresh(172_800_000), // ensure we have values from at least 48 hours ago
    // scanToObject when used this way is similar to defaults
    // but most importantly smart-casts remote config values and adds type safety
      enableAwesome: true,
      titleBackgroundColor: 'blue',
      titleFontSize: 12

  // all remote config values cast as strings
  remoteConfig.booleans.subscribe(...); // as booleans
  remoteConfig.numbers.subscribe(...); // as numbers

  // convenience for observing a single string
  remoteConfig.booleans.enableAwesome.subscribe(...); // boolean
  remoteConfig.numbers.titleBackgroundColor.subscribe(...); // number

  // however those may emit more than once as the remote config cache fires and gets fresh values from the server
  // you can filter it out of .changes for more control:
    filter(param => param.key === 'titleBackgroundColor'),
    map(param => param.asString())
    // budget at most 800ms and return the freshest value possible in that time
    // our budget pipe is similar to timeout but won't error or abort the pending server fetch (it won't emit it, if the deadline is exceeded, but it will have been fetched so can use the freshest values on next subscription)

  // just like .changes, but scanned as into an array
  remoteConfig.parameters.subscribe(all => ...);

  // or make promisified firebase().remoteConfig() calls direct off AngularFireRemoteConfig
  // using our proxy
  remoteConfig.getAll().then(all => ...);
  remoteConfig.lastFetchStatus.then(status => ...);
You can’t perform that action at this time.