DEV Community

Cover image for Feature Flags with Azure and Angular
Giorgio Boa for This is Learning

Posted on • Updated on


Feature Flags with Azure and Angular

Recently I'm developing an Angular application, but with the increasing complexity and pressing releases, the need to perform rapid deploys is huge.

Here some problems:

  • deploy functionalities but some of them are not completely finished
  • test a feature only for certain number of users

But how can I solve this pain?

Azure App Configuration

I could create a service that exposes the configurations, but the maintenance and development costs of this service would perhaps become too high for what I need.
To minimise costs I decided to rely on Azure because we can use its App Configuration service.
We are going to explore the Feature manager section.

Feature manager

Create Resource

First thing first, you need to have an Azure account, free plan works good for this example,
then you have to create the App Configuration resource.



You need to specify:

  • Resource group
  • Resource name

You can set Pricing tier => Free


Feature flag creation

In the Feature Manager you can define your feature flags


πŸ‘‰ You can use Create to create a new feature flag

Image description

You can also define different types of filter

  • Targeting

  • Time window

  • Custom filter

Flag created


Access Keys

Connection String is needed to retrieve the configuration from your client


That's all from the Azure Side


To connect Angular with Azure App Configuration you need to add two packages into your Angular app.
You can install them with npm.


Then in your Angular component you can read and use the configuration like this:




typescript file

This env variable -> AZURE_APP_CONFIG_CONNECTION_STRING contains the Azure connection string.
In the key property you need to pass the feature flag unique key.

That's all folks πŸš€






πŸŽ‰ As you can see it's super easy to implement this functionality and I'm so happy about it. πŸ˜„

You canΒ follow me on Twitter, where I'm posting or retweeting interesting articles.

I hope you enjoyed this article, don't forget to give ❀️.
Bye πŸ‘‹

Top comments (2)

scr2em profile image
Mohamed Abdelgwad • Edited

You can convert it to a directive, something like

<div *isFeatureEnabled='AboutSection'> 

Enter fullscreen mode Exit fullscreen mode
kasuken profile image
Emanuele Bartolesi

I love the Feature Flag and I use this Azure service in a lot of my products.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.