@eriklieben/angular-feature-flags v16.0.0

Angular Feature Flags

Feature Flags for Angular

Usage

<p *eIfNotFeature="['feature-two-trial:treatment','feature-one-trial:control'; operator: 'AND']">
You are NOT in the feature two trail treatment and not in the feature-one-trail control group.
</p>

<div *eIfFeature="'feature-two-trial:treatment'">
  <button (click)="title='clicked'" eFeatureTrace="feature-two-trial:treatment|ok">click me</button>
</div>

<div *eIfFeature="'feature-one-trial:control'">
  <button (click)="title='clicked'" eFeatureTrace="feature-one-trial:control|ok">click me</button>
</div>

Setup

Response from server

{
    "featureFlags": {
        "feature-one-trial" : "control",
        "feature-two-trial" : "treatment"
    },
}

Setup module

features-configuration.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class FeaturesConfigurationService {

  constructor(private http: HttpClient) { }

  public getFeatureFlags = async (): Promise<string[]> => {
    const data = await this.http.get('/file.json').toPromise() as userData;

    const flags: string[] = [];
    const featureFlags = Object.keys(data.featureFlags);
    for(let flag of featureFlags) {
      flags.push(`${flag}:${data.featureFlags[flag]}`);
    }

    return flags;
  }
}

feature-flags.service.provider.ts

import { FeatureFlagsService } from '@eriklieben/angular-feature-flags';
import { FeaturesConfigurationService } from './features-configuration.service';

const featureFlagsServiceFactory = (provider: FeaturesConfigurationService) => {
  return new FeatureFlagsService(provider.getFeatureFlags);
};

export let FeatureFlagServiceProvider = {
  provide: FeatureFlagsService,
  useFactory: featureFlagsServiceFactory,
  deps: [FeaturesConfigurationService]
};

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    FeatureFlagsModule,
  ],
  providers: [
    FeatureFlagServiceProvider,
    {
      provide: APP_INITIALIZER,
      useFactory: (flagService: FeatureFlagsService) => {
        flagService.monitor$.subscribe((data:any) => {
          console.log('monitor', data);
        });

        return () => flagService.initialize();
      },
      deps: [FeatureFlagsService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})