DEV Community

paulmojicatech
paulmojicatech

Posted on

1 1

Implementing Feature Flags in Angular

Implementing Feature Flags in Angular

This is a quick demo of how to implementing feature flags based on a user login. The idea is that on login, a user would be issued a token with all the feature flags s/he is assigned to and the UI would render the correct component based on that token. Here is the github where I posted the code.

Why is it useful?

This is good for testing a new feature that is not yet completely feature ready. Users of the application can be assigned several flags enabled and test those features in a staging or testing environment without causing the original tests to fail. This can also be useful in A / B testing where earlier adopters can have the flags turned on.

What this demo does NOT address

This demo does not implement the preload strategy that comes out of the box with Angular via APP_INITIALIZER. I will try to provide a demo for that when time permits me to do more research on it. I believe the thought around that is that Angular's runtime engine (Ivy in version 9) can execute a preload strategy when the app initializes.

What this demo does

The login has a picklist of 4 users.

  • Old: This user has no feature flags enabled. On login, s/he will see the native input element.
  • featureA: This user has the feature flag that will show the input styled using Angular Material's matInput component.
  • featureB: This user has the feature flag that will show the input as Angular Material's autocomplete component, where the options are all the different users
  • allFeatures: This user has both feature flags (A and B) and on login, will see both features.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more