Angular 2+ Implementation

We provide a wrapper around the javascript SDK for use in angular applications.

The complete implementation docs are located in the open source github repository here

A running example is available on stackblitz

Install via NPM

npm install --save featureflow-angular

Add the featureflow module to your angular project

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 {}

Import the featureflow service

import { FeatureflowAngularService } from "featureflow-angular";

Initialise the service with the 'JS Client Environment SDK Key' (which you can get from the features page in featureflow). Below is an example component which imports and initialises featureflow:

import { Component, OnInit } from "@angular/core";
import { FeatureflowAngularService } from "featureflow-angular";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Featureflow Simple angular example";
  exampleFeatureStatus = "off";
  featureflow: any;
  features: any;

  constructor(private featureflowAngularService: FeatureflowAngularService) {
    featureflowAngularService.init(
      "sdk-js-env-12345678",
      { id: "1" },
      null
    );
    this.features = featureflowAngularService.getFeatures();
    console.log(this.features);
    this.featureflow = featureflowAngularService.client();
  }
  ngOnInit() {
    this.exampleFeatureStatus = this.featureflow
      .evaluate("example-feature")
      .value();
  }
}

Evaluate features using the featureflow JS API

<p>
  example-feature is {{ exampleFeatureStatus }}
</p>
<ul>
  <li *ngFor="let feature of features | keyvalue">
    <b>{{feature.key}}</b> is: <b>{{feature.value}}</b>
  </li>
</ul>

See the featureflow-javascript-client for the full JS API