Angular13 with Firebase Remote Config

Integrate Firebase Remote Config in an Angular App using AngularFire.

Firebase console for Remote Config

This article will help you to integrate the Firebase Remote Config module into an Angular web application that already has the Firebase initialized.

Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring a code upgrade.

Get started

I. Add Remote Config:

Firebase recommends using AngularFire Framework Library to bind Firebase to an Angular application. So, add AngularFire to your application for easy integration. Use the following command to add the library:

ng add @angular/fire

Maintain the below version compatibility for a smooth integration and working.

Version compatibility chart

II. Code Setup:

Your app.module.ts file will look like below:

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireRemoteConfigModule, DEFAULTS, SETTINGS, AngularFireRemoteConfig } from '@angular/fire/compat/remote-config';
@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireRemoteConfigModule 
  ],
  providers: [
    { provide: DEFAULTS, useValue: { enableAwesome: true } },
    {
      provide: SETTINGS, useFactory: () => isDevMode() ? { minimumFetchIntervalMillis: 10_000 } : {}
    }
  ]
 });
export class AppModule { 
 constructor(private remoteConfig: AngularFireRemoteConfig) {
  this.remoteConfig.fetchAndActivate();
 }
}

1. AngularFireRemoteConfig will dynamically import and configure firebase/remote-config.
2. SETTINGS will allow you to configure Firebase Remote Config. Also, you can replace the function isDevMode() with your logic.
3. DEFAULTS ({[key: string]: string | number | boolean}) tells AngularFireRemoteConfig to emit the provided defaults first. In the above code, the default value for enableAwsome is true.
4. fetchAndActivate()performs fetch and activate operations.

In your component, you can then do the Dependency Injection forAngularFireRemoteConfigand make calls against the SDK.

import { AngularFireRemoteConfig } from '@angular/fire/compat/remote-config';
constructor(private remoteConfig: AngularFireRemoteConfig) { }

If you are using some shared service, probably you can do like below:

import { Injectable } from '@angular/core';
import { AngularFireRemoteConfig } from '@angular/fire/compat/remote-config';
@Injectable()
export class RemoteConfigService {
 constructor(private remoteConfig: AngularFireRemoteConfig) { }
 /**
 * Get remote config value by key
 */
 public async getValueByKey(key: string): Promise<any> {
   return this.remoteConfig.getNumber(key).then((value) => {
     return value;
   }).catch((err) => {
     return err;
   });
  }
}

In the above code, we have used getNumber() function to get the value of the given key as a number. Similarly, AngularFireRemoteConfig provides many other functions to get the value.

III. Firebase console:

For first time users, the console looks like the below:

Firebase console for first time user

Use the Create configuration button to add the key-value pair with an optional description. Then, using the Publish changes button you can publish the changes. Once you publish, changes are immediately available to your apps and users.
You can either modify or delete the configuration whenever you want by choosing the delete or edit options available in the Firebase console.

Now you can start using the full feature of Firebase Remote Config in your app:

1. Quickly roll out changes to your app’s user base.
2. Customize your app for segments of your user base.
3. Run A/B tests to improve your app.

Good Luck!
If you are interested, check out my blog on Firebase Analytics with AngularFire