Angular Feature Flags: a Step-by-Step Guide with a Working Application
Angular is the first Single Page Application (SPA) framework released initially as AngularJs in 2010. Angular is developed by Google and it is still a popular framework for developing web applications compared to its competitors. In this guide, we'll walk through tangible ways to use feature flags in your Angular applications. As an example use case, you'll learn how to use Angular feature flags to control the rendering of a "share" button feature in an e-commerce app.
By the end of the guide, you'll have a solid understanding of Angular feature flagging that can be used to implement flags in your own projects. This lets you use flags to enhance your team's development workflows, deploy changes to products faster, and continually deploy with lower risk.
Let’s get going!
Before we dive deeper into the code, below are some requisites to be familiar with:
- Knowing how NPM works is required, adding an NPM package with the npm command is needed
- A Flagsmith account is used to create and manage a simple feature flag as part of the tutorial. Set up a free account now.
Now let's our hands dirty with the code.
Example Angular App: e-Commerce Shop
For this guide, you will build upon a bare-bones e-shop used in the official Angular Getting Started guide. It is a basic e-commerce app that lists products, on which you can navigate to the product detail page and add it to the cart to checkout.
For our feature flag example, we will add a feature flag to the product list component so that the “Share” button can be hidden or shown by disabling or enabling the feature flag on the Flagsmith interface.
The e-commerce app looks like the below when you run it locally:
First, you clone the app from GitHub then you go into the directory. After that, you install the NPM dependencies with `npm install`, then you run the app with `npm start` which will show you something like the below:
Subsequently, if you hit `http://localhost:4200` on your browser of choice you will see the app working.
The goal of this tutorial is to enable you to add a feature flag for the “Share” button feature. The “Share” button can be hidden or shown by disabling or enabling the feature flag on the Flagsmith interface. This does not require any code changes or any deployment/release process. In the end, you will be able to achieve this and it will look like the following:
To do this you will first need to add the feature flag on Flagsmith, which is discussed in the next section.
Set up Flagsmith for feature flags
To create the Angular feature flag to show or hide the share button, you will first create a project in Flagsmith. To create a project you will click the “Create Project” button after signing up and logging in to Flagsmith:
You are naming your project angular-shop to keep things simple. Then you will reach a page as follows:
On this page, you will click the “Create Your First Feature” button found at the end of the page. It will open a form as seen below:
You will fill in the “ID” of the feature flag, which is `show_share_button` in the above picture. Consistent naming is one of the feature flags best practices. This is a boolean feature flag that is either on or off so the value is not necessary. As the name suggests, this feature flag is used to show or hide the share button on the Angular app. Adding a description will be helpful for future reference and add tags if you think they will be useful later.
When the feature flag is created, it will look like the below:
Add Angular feature flag to the app
After the `flagsmith` client has been installed, you will first create the `feature flag service` which will load the client and check if the feature is on or off. The service is described next.
Create Angular feature flag service class
You will create the feature flag service class at `src/app/feature-flag/feature-flag.service.ts`. It will communicate with Flagsmith using its client to find out if the `show_share_button` feature flag is on or off. The code for this feature flag service looks like the below:
First, you import `injectable` from Angular core which is used to make sure the `FeatureFlagService` class can be injected into any class that uses it as a dependency. Please read about Dependency Injection in Angular to grasp the concept better. Next, you import the `flagsmith` client from `flagsmith`. After that, you initialize the Flagsmith client with the `environmentID`. This `environmentID` can be found on the feature page in the `Initialising your project` section.
Replace your Environment ID properly from your feature flag page. Also, keep in mind that the ID is different for the development and production environment. The Flagsmith client is initialized with caching on and analytics off.
Next, you define the class `FeatureFlagService` which is injectable and has only one method `isFeatureOn`. The main thing happening in this method, it takes in the name of the feature flag and checks if that feature flag is on or off on Flagsmith calling the client’s hasFeature method.
The next step is to add the directive that is going to use this service to show or hide the feature.
Angular feature flag directive
The service class is only responsible to communicate with Flagsmith by using its client. It checks if the feature flag is on or off but does not handle any of the rendering logic. In Angular rendering logic for the views is offloaded to a directive. Thereby, you will create an attribute directive at `src/app/feature-flag/remove-if-feature-off.ts` with the following content:
The directive starts by importing Directive, ElementRef, Input, and OInit from Angular core. It also imports the `FeatureFlagService` you created in the previous section. Then with the `@Directive` decorator, you define that the directive will be activated by the attribute `removeIfFeatureOff` on any HTML tag.
Next, you export the directive class named `RemoveIfFeatureOff` that implements the `OnInit` interface. This interface has the `ngOnInit` method to initialize the directive. In the next line, you instruct that the name of the feature flag will be sent in from the attribute as `featureName` which is a string. In the constructor of the class, you set the feature name to be an empty string initially.
Then the `ngOnInit` method is defined. In this method, if the feature flag passed via the featureName attribute is not on, then the children of that HTML attribute are removed. As it is a directive it can be added to any HTML tag and the children of that tag can be shown or removed as per the value of the feature flag. Using a directive makes it not only easy to use but very flexible as well. This will make more sense once you see the implementation of this directive in the wiring up with the product list component done in the next section.
Wire up service and directive with the product list component
To glue up the service and directive with the product list component, you will add them to the App module and component. You will add the `FeatureFlagService` to `src/app/app.component.ts` as follows:
The app component is the root component of this application. If you add the service to the app component’s [providers](https://angular.io/guide/providers), it can be used in any other component or class that wants to use it. Next, you add the `RemoveIfFeatureOff` directive to the declarations array of the App module file `src/app/app.module.ts` as follows:
As the directive is added to the `declarations` of the main module - the app module, it will be accessible to any sub-module or view in the application. The trigger to make it all work is to add the directive with the proper feature flag name on the product list view file at `src/app/product-list/product-list.component.html` as follows:
In the part `<div [removeIfFeatureOff]="'show_share_button'">`, the custom attribute directive you defined earlier with attribute `removeIfFeatureOff` is used. The feature name is passed as `'show_share_button'` which is the same as the feature flag you defined in the earlier stage.
In the directive, if the feature flag is off, it will remove the child which will be the `button` tag in this case. So if the feature is on it will keep the button tag for the share button as is, else it will remove the button HTML tag which will disable the feature.
Given all the setup on the Flagsmith UI and the code is done, in the next section, you will test that the functionality with the Angular feature flag works as expected.
Test the Angular feature toggle change
To test the feature flag, you can change the settings in the Flagsmith interface. As the feature toggle is in the “On” state the `Share` button will show up initially. When you turn off the toggle and refresh the page the `Share` button will then disappear.
Note that you might need to wait a couple of seconds and it might take a couple of refreshes for the change to take effect. It is also the case because the caching of flags is turned on in the client configuration. The whole process can be seen in action below:
You can see the feature flag turned off version on Netlify. All the code to add the Angular feature flag with the Flagsmith client is available as a pull request for your reference. In the next section, you will learn about further steps for Angular feature flags.
Next steps and more options for your Angular feature flags
Angular has changed a lot in the past 10 years. Currently, it is very close to how Nest.js is structured and also supports TypeScript by default. The use of services, guards, dependency injection, and directives make it easy to write SOLID code using TypeScript.
In terms of feature flags and Flagsmith, there are avenues to tap into. If you want to use the Flagsmith client directly on the browser you can do it by including the following script:
In addition to that, you can use feature flags with values, not just on and off. For instance, you could control the colour of the “Share” button with a feature flag that has the value of the colour like blue, light blue, or dark blue. And this can be changed on the fly without the need to deploy any code changes.
Why Use Flagsmith for Feature Flags?
Flagsmith is built to help you roll features out more efficiently and deploy changes to products faster. What's more, Flagsmith is highly intuitive to adopt, which lets you support your team in changing your development process to bring products to market faster. Adopt modern development practices and move to continuous deployment to release more frequently.
Flagsmith is open-source and offers flexible deployment options (it can be hosted on-prem or on your private cloud, for example.) Check out the open-source version to give it a try or look into the code.
In this post, you learned about Angular, the first Single Page Application (SPA) framework. Then you were introduced to getting started with a simple Angular e-commerce app which you could run locally. After that, you set up a feature flag to show or hide the “Share” button on the product listing page. Finally, you integrated the Flagsmith feature flag in the Angular app using a new service and a directive.
This is just one way you can use Angular feature flags. Flags can help you deliver value faster in a huge number of ways, from phased rollouts to segmented releases to testing in production, and more.
Feature flags help you release software with a high degree of confidence since you can turn a feature on or off in a matter of clicks when it's wrapped in a flag. There is no need to change or deploy any new code, which brings down the risk level significantly.
Get Started with Angular Flags and Flagsmith
More Reading: Feature Flags and Other Languages/Frameworks
If you like this Angular feature flag guide, you can check out our other guides: