How do I configure Angular app with Azure App Config Feature Flag and Targeting Filter?

Question

I'm working in an angular app and trying to implement a feature flag with Azure App Configuration and a targeting filter to only enable the feature flag for specific users. I can find exactly ZERO tutorials or examples on how to implement this in my angular app. I know how to set up the azure App Config side, but have no clue how to implement this in my angular client.

I am currently retrieving my flag value like this in my code. But once I set up the allowed users in Azure, how do I alter this call to actually pass the currentUser to check if the feature flag should be enabled for them? Microsoft docs on this are no help. Or is this something I have to check on my own once flagValue is returned?

const currentUser = this.userEmail;
const client = new AppConfigurationClient(myConnectionString);
let flagValue = await client.getConfigurationSetting({
  key: featureFlagPrefix + key,
  label: key
});
return JSON.parse(flagValue.value).enabled;

Answer 1

Firstly, I had created sample angular app and configured AppConfigService as below.

• Retrieving the Targeting Filter setting from Azure App Configuration and performing the user token/email comparison in the code.

import { Injectable } from '@angular/core';
import { AppConfigurationClient } from '@azure/app-configuration';

@Injectable({
  providedIn: 'root'
})
export class AppConfigService {
  private client: AppConfigurationClient;

  constructor() {
    const connectionString = 'your-connection-string'; // Replace with your Azure App Configuration connection string
    this.client = new AppConfigurationClient(connectionString);
  }

  public async isUserAllowed(userToken: string): Promise<boolean> {
    const targetingFilterSetting = await this.client.getConfigurationSetting({
      key: 'TargetingFilterSettingKey',
      label: 'TargetingFilterSettingLabel'
    });

    const targetingFilter = targetingFilterSetting.value;
    const allowedUsers = targetingFilter.split(',');

    return allowedUsers.includes(userToken);
  }
}

• To check if a user is allowed based on the Targeting Filter.

import { Component } from '@angular/core';
import { AppConfigService } from 'path-to-your-app-config-service';

@Component({
  selector: 'app-user-component',
  template: `
    <div *ngIf="isUserAllowed">User is allowed.</div>
    <div *ngIf="!isUserAllowed">User is not allowed.</div>
  `
})
export class UserComponent {
  isUserAllowed = false;

  constructor(private appConfigService: AppConfigService) {}

  async ngOnInit() {
    const userToken = 'user@example.com'; // Replace with the actual user token or email
    this.isUserAllowed = await this.appConfigService.isUserAllowed(userToken);
  }
}

• Replaced my Connection string of the Azure App Config resource.

• In my Angular component where I want to use a feature flag, inject the AppConfigService into the constructor.

AppComponent.ts:

import { Component, OnInit } from '@angular/core';
import { AppConfigService } from './app-config.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Feature Flags</h1>
    <pre>{{ featureFlags | json }}</pre>
  `,
  styles: []
})
export class AppComponent implements OnInit {
  public featureFlags: any;

  constructor(private appConfigService: AppConfigService) {}

  async ngOnInit(): Promise<void> {
    this.featureFlags = await this.appConfigService.getFeatureFlags();
  }
}

• It stores the retrieved feature flags in the featureFlags property, and by using the json pipe it displays the JSON object in a pre-formatted format.

Result:

• Now, my Angular app will retrieve the feature flag value from Azure App Configuration.