Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time


Featureflow Angular Service

Get your Featureflow account at


Using NPM

$ npm install --save featureflow-angular

Get Started

  1. add FeatureflowAngularModule to app NgModule.

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FeatureflowAngularModule } from 'featureflow-angular';
      declarations: [
      imports: [
        FeatureflowAngularModule // FeatureflowAngularModule added
    providers: [],
    class MainModule {}


    import { Component } from '@angular/core';
    import { FeatureflowAngularService } from 'featureflow-angular';
        template: `
        <div *ngIf="featureflowService.evaluate('my-feature-key').isOn()">
            <h2>I will be seen when the feature is on</h2>
            <p>And this is some extra text</p>
        <div *ngFor="let item of features | keyvalue">
    export class YourComponent {
      features: any;
      featureflow: any;
        private featureflowService: FeatureflowAngularService
      ) {
            featureflowService.init(API_KEY, {id: '1'}, null);
            this.features = featureflowService.getFeatures();
            this.featureflow = featureflowService.client();
  2. That's it.

  3. If you want to update your component when the evaluated feature changes in realtime, us featureChanged$ subscription from featureflowService

    import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
    import { Subscription } from 'rxjs';
        changeDetection: ChangeDetectionStrategy.OnPush // to make your app perform smooth and faster
    export class YourComponent {
      features: any;
      featureflow: any;
      updateFeatures: Subscription = null;
        private ref: ChangeDetectorRef
      ) {
            // listen for the real time streaming changes
            this.updateFeatures = this.featureflowService.featureChanged$.subscribe(features => {
                  this.features = featureflowService.getFeatures(); // update features after feature change
                  this.ref.detectChanges(); // change detection in features is manually run 
      ngOnDestroy() {
        // unsubscribe to ensure no memory leaks

Live Example

There is a simple running example based on the angular starter on stackblitz:

Replace the key in app.component.ts with your own Environment SDK Key.

Local Example

Update the SDK key in featureflow-angular-examaple/src/app/app.component.ts to match your JS Client Environment SDK Key

    featureflowService.init('js-env-YOUR-KEY-HERE', {id: 'uniqueId1'}, null);

Start the example project

cd projects/featureflow-angular-example
ng serve

Try toggling features in the featureflow dashboard for your project and environment.


This project consists of 2 modules:

  • /projects/featureflow-angular - the angular service library
  • /projects/featureflow-angular-example - the example implementation

to build the library, from the root directory run

ng build featureflow-angular

then run the example

cd projects/featureflow-angular-example
ng serve


After building your library with ng build featureflow-angular, go to the dist folder cd dist/featureflow-angular and run npm publish.

Running unit tests

Run ng test featureflow-angular to execute the unit tests via Karma.