Feature Flags with Azure and Angular
Tags: azure, angular, webdev, programming
Published: 2022-11-10 12:39:27

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] (https://azure.microsoft.com/) because we can use its [App Configuration](https://azure.microsoft.com/en-us/products/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3ekkae8u4tnfp34yz0p.png)

![CreateButton](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g11we1usadyvaito064l.png)

You need to specify:
- Resource group
- Resource name

You can set _Pricing tier_ => Free

![Review+Create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3ft11m6h746s5olq9ox.png)

#### Feature flag creation

In the Feature Manager you can define your feature flags

![FeatureManager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqdiigl680svtx80g1y5.png)


👉 You can use _Create_ to create a new feature flag


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toanv5hbz170uoo990rd.png)

You can also define different types of filter

- Targeting
![Targeting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8kjyui2nwo1zwpewwg4.png)

- Time window
![TimeWindow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjei0sl8nelvk4wgrnp2.png)

- Custom filter
![Custom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7renknc8dwjb9d57hg5l.png)

#### Flag created 
![Created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cj09t7jf1v2sgvyy8sk0.png)

## Access Keys

Connection String is needed to retrieve the configuration from your client

![ConnString](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wnocjdvejps56k6419l.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35gxji5abzaxygm6ypmk.png)

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

#### app.component.html

![html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8r3mtr3akx9wh25lgn5u.png)

### app.component.ts

![typescript file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jz0il1am18zlng8p8l3.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flo65dyhgfzhdt7aihgb.png)

#### Enabled

![Enabled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/al8c04bpqx03yjacc3ju.png)

🎉 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](https://twitter.com/giorgio_boa), where I'm posting or retweeting interesting articles.

I hope you enjoyed this article, don't forget to give ❤️.
Bye 👋

{% embed https://dev.to/gioboa %}