Post
Ask Question

Feature flagging using Azure App Configuration and Angular

Azure App configuration is a service that allows you to get feature flagging mechanisms in minutes.

In order to make the most of it, the service needs to be created on the Azure portal, the flags must be created there and the service should be connected to your project. In this demo, we will ‘feature flag’ some content on a basic Angular page.

To have a better insight into what feature flagging is, please read the following: https://www.c-sharpcorner.com/article/feature-flagging-the-flagship-idea-of-programmers/

Creating Azure App Config

  1. Log in to the Azure portal.
  2. Look for ‘App Configuration’
    App Configuration
  3. Click on ‘Create’.
  4. Fill in the ‘Basics’ information.
    Basics
  5. Once you fill in the ‘Basics’ info, your form should look like this.
  6. Also, be cautious about the pricing tier.
    Create app
  7. If you do not need to configure the other tabs, you can click on ‘Create’
    Create
  8. Once done, you will get the screen below.
    Resources
  9. Click on ‘Go to resources’. Once there, expand the ‘Operations’ menu in the side navigation and select ‘Feature Manager’.
    Feature Manager
  10. When the page loads, click on ‘Create’ and select ‘Feature flag’.
    Feature flag
    Note. While feature flags allow you to decide whether users can access the feature, variant flag allows you to segment your users and decide which users can access the feature.
  11. Below is an example of how you can create a feature flag.
    Details
  12. ‘Enable feature flag’: this sets the default value of the flag. When checked, the flag is on, meaning the feature is available.
  13. ‘Feature flag name’: The name (also called the ID) of the feature flag as it appears when referenced in code.
  14. ‘Key’: You can use the key to filter feature flags that are loaded in your application. The key is generated from the feature flag name by default, but you can also add a prefix or namespace to group your feature flags.
  15. Once done, click on ‘Apply’.
  16. You will be redirected to the main page of the app configuration.
    Main page
  17. From here, you can easily toggle the flag on and off using the switch under the ‘Enabled’ column.

Feature flagging in Angular

  1. In your Angular project, install the following dependencies.
    • Azure App Configuration: npm i @azure/app-configuration.
    • Azure Identity: npm i @azure/identity.
  2. Get the connection string from Azure.
  3. To do so, in the app configuration service you created, click on ‘Setting’ in the side navigation and select ‘Access setting’.
    Access setting
  4. On the page, you get the connection string.
    Connection string
  5. Generate the environment files if they are not already created.5. In the environment.ts file, add the following.
export const environment = {
    APP_CONFIG_CONNECTION_STRING: <<connection-string>>,
};

Note. use the connection string obtained from step 2.

In the .ts file, create a variable of type Promise<boolean>

For example

isEnabled: Promise<boolean> = Promise.resolve(false);

Create a function that will retrieve the value of the feature flag.

private async getFeatureFlagValue(): Promise<boolean> {
    const featureFlag = await this.client.getConfigurationSetting({
        key: '.appconfig.featureflag/frontend-signup-flag'
    });

    return !!featureFlag.value ? JSON.parse(featureFlag.value).enabled : false;
}

The value of ‘key’ is the one generated when creating the feature flag on Azure.

You can also get it on the main screen of the app configuration.

Key

You can call this function in the ngOnInit function.

For instance

ngOnInit() {

   this.isEnabled = this.getFeatureFlagValue();

 }

In the HTML, add a ‘ngIf’ wherever the part you want to be the feature flag is.

In our case, we want to toggle a ‘<div>’ whose development is not yet completed.

The code is as follows

<div *ngIf="isEnabled | async">
       <p>Sometimes, signing up opens the doors to a world of unlimited possibilities</p>

       <button>Sign up</button>

</div>

Here, the ngIf tests the value of the ‘isEnabled’ boolean.

The value of the feature flag is fetched from Azure and is stored in ‘isEnabled’.

If the flag is toggled off on Azure, you just need to refresh your page, and the ‘<div>’ disappears automatically.

Note. If you are still working on a development, when creating a flag on Azure Portal, set it to false.

Hence when you deploy your code, this part will not be visible to the users.

Once you are done with the development, just toggle it ‘on’ on the Azure Portal and users just need to do a refresh to get the new feature.

Conclusion

The whole process takes less than 10 mins. If done correctly, the positive impact on your project is almost immediate. As always, it is good to check the documentation as some new features for this service can be released. Also, this technique can be used with other multiple languages and even for the backend. So explore it and share your learnings!

Reference: https://learn.microsoft.com/en-us/azure/azure-app-configuration/manage-feature-flags?tabs=azure-portal


Similar Articles