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!

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 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](mailto: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:

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

…

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

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a
      [title]="product.name + ' details'"
      [routerLink]="['/products', product.id]">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

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

  <app-product-alerts
    [product]="product"
    (notify)="onNotify()">
  </app-product-alerts>

</div>

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:

<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. And this can be changed on the fly without the need to deploy any code changes.

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 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.

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

Get Started with Angular Flags and Flagsmith

If you want to start using Flagsmith with Angular feature flags, 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 Angular feature flag guide, you can check out our other guides:

• Java feature flags
• Python feature flags
• Node.js
• Flutter feature flags
• PHP feature flags
• Swift feature flags
• React Native Flags