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.

CreateResource

CreateButton

You need to specify:

  • Resource group
  • Resource name

You can set Pricing tier => Free

Review+Create

Feature flag creation

In the Feature Manager you can define your feature flags

FeatureManager

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

Image description

You can also define different types of filter

  • Targeting
    Targeting

  • Time window
    TimeWindow

  • Custom filter
    Custom

Flag created

Created

Access Keys

Connection String is needed to retrieve the configuration from your client

ConnString

That's all from the Azure Side

Angular

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

dependencies

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

app.component.html

html

app.component.ts

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 πŸš€

Result

Disabled

Disabled

Enabled

Enabled

πŸŽ‰ 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)

Collapse
 
scr2em profile image
Mohamed Abdelgwad • Edited

You can convert it to a directive, something like

<div *isFeatureEnabled='AboutSection'> 

Enter fullscreen mode Exit fullscreen mode
Collapse
 
kasuken profile image
Emanuele Bartolesi

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