Angular 2+ Implementation
Implementation in Angular 2+
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
Updated about 1 year ago