Angular How-to: Implement Feature Flags

Premier Developer

Premier

Senior Dev Consultant Laurie Atkinson demonstrates how to turn features on and off via configuration or from a database. This may include hiding and disabling UI elements, changing code flow, or preventing routing to components.


In an agile development environment, there may be partially completed features or features with external dependencies that are not ready. Instead of relying on multiple code branches, instead you may opt for deploying code with a feature turned off. Later, that feature should be turned on via a configuration or database change. This post provides sample code that you can use to implement feature flags in your Angular app.

Option 1: Define features in a config file

One option for storing feature flags is in a JSON configuration file. Refer to this post for an explanation on consuming an editable configuration file.

config.dev.json

app-config.model.ts

Create a feature flag service

Centralize the management of determining whether a feature is turned on or off into an Angular service.

feature-flag.service.ts

Option 2: Use an API instead of a config file to get feature flags

Instead of reading feature flags from a config file, another option is to retrieve the features from the server via an API that could read these values from a database. The feature-flag service could be adapted to fetch the feature flag values as soon as the app starts.

feature-flag.service.ts

Create attribute directives to hide and disable elements

To hide an element based on whether a feature is turned on or off, use the following code to create a directive. This will enable the Angular templates to use this syntax:

remove-if-feature-off.directive.ts

remove-if-feature-on.directive.ts

Call the feature flag service elsewhere in the app

In addition to the attribute directives, the feature flag service can be called throughout the app. For instance, a menu service could use the featureOn method to hide menu items if the user does not have the required permission.

menu.service.ts

Prevent routing to component

If access to a component should be prevented when a feature is turned off, this can be accomplished by using the canActivate option available in Angular’s router.

my-routing.module.ts

feature-flag-guard.service.ts

This implementation of feature flags has proven to be helpful on my current project and has allowed us to proceed with the development of new features without the risk of introducing new functionality before QA is ready. I’ve introduced a few enhancements along the way, including:

  • addition of a scope for the feature – meaning the feature is available only for certain criteria
  • an option for the route guard to check for any of an array of features’ being turned on

Also, it is worth highlighting that if a feature name is misspelled either in the configuration or in the code, then it is considered turned off. The effect of this approach is that a feature will not accidentally be turned on.

Premier Developer
Premier Developer

Premier Support for Developers

Follow Premier   

0 comments

    Leave a comment