Featureflow Angular Client

Github: https://github.com/featureflow/featureflow-angular

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();
  }
}

3. That's it.
4. 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.