Azure dynamic Feature Management for Angular Applications

There are times when you are working on big feature and want to test your code compatibility with the other code and there are time when your unfinished code has to be pushed to the main branch to support some other dependent functionalities. The issue is now you want to hide these unfinished functionalities from end user till it’s completed. Here comes Azure feature flag to the rescue, Azure feature flags allows you to enable/disable a feature dynamically rather than hardcoding it in the app.

A feature flag is a boolean value that you set in an external system. The value is read by your application and determines if a feature is shown or activated.

Prerequisite:

• Active azure subscription

A basic quick start article can be found in

• https://docs.microsoft.com/en-us/azure/azure-app-configuration/manage-feature-flags
• https://microsoft.github.io/AzureTipsAndTricks/blog/tip289.html

Azure Feature Management service can be utilised in two flows in an Angular application:

• Element specific
• Route specific

Element specific

Element specific basically entails enabling/disabling or removing any UI element from the UI.

A basic illustration of feature configuration workflow

Let’s First start with creating a service to retrieve value of a key whether its enabled or disabled.

A sample code snippet will look like this:

//will retrieve the value of key
//keyName is the name of key you want to get value for
async BetaFeatureCheck(keyName: string)
{
const conn = environment.featureURL;//app config read-write key
const client = new AppConfigurationClient(conn);
var val = await client.getConfigurationSetting({
key: '.appconfig.featureflag/' + KeyName,
label: 'webapp',
});
if (val.value != undefined) return JSON.parse(val.value).enabled;
else return false;
}

the above function will return enabled status (true/false) for a key.

Let’s say you have one button in UI to hide, here are steps on how it can be done:

• In your ‘ts’ file declare a variable and call the “BetaFeatureCheck” function with an appropriate key.

counterButonFeature = this.featureService.BetaFeatureCheck('Feature-Button');

• In your ‘html’ file, you can do something like this:

<div  *ngIf="counterButonFeature|async">
<button> Feature button </button>
</div>

So, based on the value you get from variable “counterButonFeature” you can hide/show the above div.

Route specific

Route specific flows are well suited when you don’t want a particular set of users to have access to a particular route.

You can remove the menu item from navigation itself using the above mentioned (UI specific) flow, but this case will help if the user tries to access the route manually.

• To achieve this flow we’ll create one custom guard called FeatureAccessGuard

Here is a sample snippet

create a CanActivate Guard

FeatureAccessGuard snippet

Now you can apply this guard on the routes you want to check the access for

So now whenever a user tries to access “/admin” route it will activate feature check.

Miscellaneous

CRUD operations on keys from Angular app

Best Practices for an Enterprise application

Even though you can integrate Azure App config in client side, it’s good to build a server-side component to handle communication directly with App Config. Then have the client app communicate with that server-side component, to load the configuration it needs.