Angular Feature Flags: a Step-by-Step Guide with a Working Application

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.

What is Angular?

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.

Angular helps web developers (mostly frontend web developers) create dynamic web apps. It basically replaces traditional JavaScript development by bringing in more structure to the code.

Now, let's cover a little bit on what feature flags are and how to best use feature flags in Angular applications.

What are Feature Flags?

Feature flags are software development tools that enhance your team's development workflows. Feature flags let you separate deploy and release to make changes to products faster and continually deploy with lower risk. Feature flags are a great lever for things like phased rollouts, kill switches, canary releases, and A/B testing. If you're new to feature flags, we have a feature flags best practices guide that covers things like cleaning up old flags, naming conventions, etc.

Let’s get coding!

Prerequisites

Before we dive deeper into the code, below are some requisites to be familiar with:

1. Some prior knowledge of JavaScript, TypeScript, and Angular will be essential. Understanding of Angular’s service, dependency injection, and directive will be necessary. For this guide, you will use Angular 14 with TypeScript.
2. Knowing how NPM works is required, adding an NPM package with the npm command is needed
3. 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 get 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:

The full code is available as a GitHub repository for your reference. You can also view the running app on Netlify. To get the above app running locally you can run the following commands:

^{git clone git@github.com:geshan/angular-feature-flag.git}

^{cd angular-feature-flag}

^{npm install}

^{npm start}

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:

You have created the feature flag named `show_share_button` and it is in an enabled state. Notice that the feature will be created in both the `Development` and the `Production` environments. For the scope of this tutorial, you will only use the Development one. In the next section, you will install the Flasmith JavaScript client, then wire it up with the Angular app.

Add Angular feature flag to the app

You have done the setup to add the feature flag to show/hide the “Share” button on the Flagsmith Web UI. Now you will need to add the SDK and the supporting code to realize the feature flag on the application. To do this, first, you will add the Flagsmith JavaScript client from NPM by executing the following command on the project root:

_{npm install flagsmith --save}

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:

import { Injectable } from '@angular/core';

import flagsmith from 'flagsmith';

‍

flagsmith.init({

  environmentID: "BtvpWuJ6V3YkuunRgLkFqg",

  cacheFlags: true,

  enableAnalytics: false,  

});

‍

@Injectable()

export class FeatureFlagService {

  isFeatureOn(featureName: string) {

    return flagsmith.hasFeature(featureName);

  }

}

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:

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

import { FeatureFlagService } from './feature-flag.service';

 

@Directive({

  selector: '[removeIfFeatureOff]'

})

export class RemoveIfFeatureOff implements OnInit {

  @Input('removeIfFeatureOff') featureName: string;

 

  constructor(private el: ElementRef, private featureFlagService: FeatureFlagService) {

    this.featureName = '';

  }

 

  ngOnInit() {

    if (!this.featureFlagService.isFeatureOn(this.featureName)) {

      this.el.nativeElement.parentNode.removeChild(this.el.nativeElement);

    }

  }

}

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:

import { Component } from '@angular/core';

import { FeatureFlagService } from './feature-flag/feature-flag.service';

‍

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

  providers: [FeatureFlagService]

})

export class AppComponent { }

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:

// Add the following to the beginning of the file to the rest of the imports:

^{import { RemoveIfFeatureOff } from './feature-flag/remove-if-feature-off';}

‍

// Extend the `declarations` argument value to the `NgModule` directive as follows:

‍

declarations: [

  AppComponent,

  TopBarComponent,

  ProductListComponent,

  ProductAlertsComponent,

  ProductDetailsComponent,

  CartComponent,

  ShippingComponent,

  RemoveIfFeatureOff

],

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 to the product list view template `src/app/product-list/product-list.component.html` as follows:

 <div [removeIfFeatureOff]="'show_share_button'">    
 <button type="button" (click)="share()">
 Share    
 </button>
 </div>
 

The custom directive you defined earlier with attribute `removeIfFeatureOff` is used with a new `div` element that wraps the button. The feature name is passed as `'show_share_button'` which is the same as the feature flag you defined in the earlier stage. The single quotes around the name are important!

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 is turned off for the app deployed 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 feature flags for Angular.

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:

<script src="https://cdn.jsdelivr.net/npm/flagsmith/index.js"></script>

This can be used to control feature flags even if you don’t use a framework like React.js or Vue.js. If you are using React.js you can read this blog post on JavaScript feature flags with React. You can also use feature flags in the backend with Node.js feature flags or other languages and frameworks.

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, without having to redeploy your app, by implementing an interface that wraps a `flagsmith.getValue(featureName)` call.There are a huge number of possible feature flagging use cases. Angular feature flags can help with things like customer segmentation and phased rollouts, canary deployments, A/B testing, and more.

Why Use Flagsmith for Feature Flags?

Flagsmith is a feature flag service built to help you roll features out more efficiently and deploy changes to products faster. It's highly intuitive to adopt, which lets you support your team in changing your development process to bring products to market faster. Deploy Flagsmith and get started in minutes. Adopt modern development practices and move to continuous deployment to release more frequently.

Flagsmith offers open source feature flags and flexible deployment options (it can be hosted on-prem or on your private cloud). Check out the open-source version to give it a try or look into the code.

Conclusion

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's no need to change or deploy any new code, which brings down the risk level significantly.

Get Started with Angular Flags and Flagsmith

To start using Flagsmith for feature flagging in Angular, just create your account here or contact us for the on-prem solution.

More Reading: Feature Flags and Other Languages/Frameworks

If you like this feature flag Angular guide, you can check out our documentation or read some of our other language/framework guides:

• Java feature flags
• Python feature flags
• Ruby feature flags
• JavaScript feature flags
• Flutter feature flags
• NodeJS feature flags
• Spring Boot feature flags
• PHP feature flags
• Golang feature flags
• Kotlin/Android feature flags
• React Native Remote Config
• Swift feature flags
• .Net feature flags

‍

‍

‍