How to use Feature Toggling in Angular Apps

Share on facebook
Share on google
Share on twitter
Share on linkedin

In these days you want to try ideas fast to see if they stick. You want to be able to split test to ideas and see what performs the best. If you for some reason want to disable or enable a feature you would want to do that instantaneously without having to redeploy the application. Sounds good, but how do you do this? One word: feature toggling.

Feature toggling is where you are inserting toggle points in your code, which is basically conditionals, that check if some flag is enabled. If it is the feature is enabled and if not the feature is disabled. This enables advantages such as experimenting with split tests, open up features for test users, release toggles used in implementing continuous delivery as well as permanent maintenance toggles for disabling certain features eg. if the server is running out of resources.

How to implement feature toggling in Angular

The above benefits of feature toggling can be achieved in Angular by creating a service for encapsulating the feature toggle logic. You can find a demo app of feature toggling with Angular on my Github.

A new Angular app is setup using:

ng new angular-feature-toggling-demo

Two feature components are created using:

ng g c feature-a

ng g c feature-b

This should create two components: one named feature-a and one named feature-b.

Next, a feature toggle service is created in app/core of the application workspace:

The feature toggle service has a method, isFeatureEnabled, to check if a feature is enabled. This method will either calculate a percent to determine if a feature should be shown or work with a plain boolean. This enables for canary releases as well as split testing. A third party library called seedrandom is installed for ensuring that the current user is seing the same features on every load. Seedrandom can be installed with:

npm i seedrandom

The user-id should be fetched from the  authentication endpoint and used here instead of the default user-id.

The features this service is working with is fetched from the assets folder as a feature-config.json file:

This defines a new feature called “killer-feature” that is shown to 50% of the users. This enables us to try out a new feature on a subset of the users while analyzing how it performs compared to existing features.

Next, the feature-config.json is gonna be loaded on app initialization using the APP_INITIALIZER provider:

An app initializer method is used to run async code before the app loads. It should return a promise and the app will start loading once this promise is installed. Bear in mind that this creates extra loading time for the app so you might also want to look into creating a loading spinner for that.

The app init service is set up in app.module.ts like this:

Lastly, this enables us to feature toggle our feature-a and feature-b components. We are gonna use the feature toggle service to check if the killer-feature is enabled and show a specific component if it is:

Bonus tip

Now that you have the basic feature toggling enablers in place you can mix this with services like Google Analytics and Hotjar to get analytics and records of the user experience of the features you are evaluating.

Conclusion

We looked at the benefits of feature toggling and how to use feature toggling for enabling release toggles, split testing and permanent toggles.

We went through how to implement feature toggling in an Angular app for split testing two features using a percent throttle.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

How to Set up a CI pipeline with Azure Pipelines and Nx

It goes without saying that having a CI pipeline for your Angular apps is a must. Setting one up for regular Angular apps is fairly straightforward but when you have an Nx monorepo there are certain other challenges that you have to overcome to successfully orchestrate a “build once, deploy many” pipeline. This post will

Read More »

How to Set Up Git Hooks in an Nx Repo

Git hooks can be used to automate tasks in your development workflow. The earlier a bug is discovered, the cheaper it is to fix (and the less impact it has). Therefore it can be helpful to run tasks such as linting, formatting, and tests when you are e.g. committing and pushing your code, so any

Read More »

The Stages of an Angular Architecture with Nx

Long gone are the times when the frontend was just a dumb static website. Frontend apps have gotten increasingly complex since the rise of single-page application frameworks like Angular. It comes with the price of increased complexity and the ever-changing frontend landscape requires you to have an architecture that allows you to scale and adapt

Read More »

The Best Way to Use Signals in Angular Apps

Since Angular 16, Angular now has experimental support for signals and there is a lot of confusion in the community about whether this is going to replace RxJS or how it should be used in an app in combination with RxJS. This blog post sheds some light on what I think is the best way

Read More »

High ROI Testing with Cypress Component Testing

Testing is one of the most struggled topics in Angular development and many developers are either giving up testing altogether or applying inefficient testing practices consuming all their precious time while giving few results in return. This blog post will change all this as we will cover how I overcame these struggles the hard way

Read More »