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

featureflow-angular

Featureflow Angular Service

Get your Featureflow account at featureflow.io

Installation

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';
    //...
    @NgModule({
      declarations: [
       //...
      ],
      imports: [
        BrowserModule,
        FeatureflowAngularModule // FeatureflowAngularModule added
      ],
    providers: [],
    })
    class MainModule {}

    Use

    import { Component } from '@angular/core';
    import { FeatureflowAngularService } from 'featureflow-angular';
    
    @Component({
        //...
        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>
        <div *ngFor="let item of features | keyvalue">
              {{item.key}}:{{item.value}}
        </div>`
    })
    export class YourComponent {
      features: any;
      featureflow: any;
    
      constructor(
        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';
    
    @Component({
        //...
        changeDetection: ChangeDetectionStrategy.OnPush // to make your app perform smooth and faster
    })
    export class YourComponent {
      features: any;
      featureflow: any;
      updateFeatures: Subscription = null;
    
      constructor(
        //...
        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
        this.updateFeatures.unsubscribe();
      }
    }

Live Example

There is a simple running example based on the angular starter on stackblitz: https://stackblitz.com/edit/simple-featureflow-angular-example

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.

Developing

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

Publishing

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.