Angular SDK

This page describes how to use the OpenFeature Angular SDK for your client application.

About this provider

OpenFeature Agular SDK allows you to connect to your GO Feature Flag instance with the @openfeature/angular-sdk.

If you work with Angular the @openfeature/angular-sdk will give you a better integration with your Angular application. To integrate it with GO Feature Flag, you need to use the @openfeature/go-feature-flag-web-provider provider.

info

We recommend you to check the OpenFeature Angular SDK Documentation to see all the available directives and how to use them.

Install the provider

npm install @openfeature/go-feature-flag-web-provider
npm install @openfeature/angular-sdk

How to use the provider?

Module

To include the OpenFeature Angular directives in your application, you need to import the OpenFeatureModule and configure it using the forRoot method.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OpenFeatureModule } from '@openfeature/angular-sdk';
import { GoFeatureFlagWebProvider } from '@openfeature/go-feature-flag-web-provider';

@NgModule({
  declarations: [
    // Other components
  ],
  imports: [
    CommonModule,
    OpenFeatureModule.forRoot({
      provider: new GoFeatureFlagWebProvider({
        endpoint: 'http://localhost:1031'
      }),
    })
  ],
})
export class AppModule {
}

Minimal Example

You don't need to provide all the templates. Here's a minimal example using a boolean feature flag:

If initializing and reconciling are not given, the feature flag value that is returned by the provider will determine what will be rendered.

<div *booleanFeatureFlag="'isFeatureEnabled'; default: true">
    This is shown when the feature flag is enabled.
</div>

This example shows content when the feature flag isFeatureEnabled is true with a default value of true. No else, initializing, or reconciling templates are required in this case.

Available directives per types

The OpenFeature SDK provides a set of directives booleanFeatureFlag, numberFeatureFlag, stringFeatureFlag and objectFeatureFlag to get the value of a feature flag. See the OpenFeature Angular SDK Documentation for more details on how to use this directive, including how to use <type>FeatureElse, <type>FeatureInitializing, and <type>FeatureReconciling.

Boolean

<div
  *booleanFeatureFlag="'isFeatureEnabled'; default: true; domain: 'userDomain'; else: booleanFeatureElse; initializing: booleanFeatureInitializing; reconciling: booleanFeatureReconciling">
  This is shown when the feature flag is enabled.
</div>
<ng-template #booleanFeatureElse>
  This is shown when the feature flag is disabled.
</ng-template>
<ng-template #booleanFeatureInitializing>
  This is shown when the feature flag is initializing.
</ng-template>
<ng-template #booleanFeatureReconciling>
  This is shown when the feature flag is reconciling.
</ng-template>

Number

<div
  *numberFeatureFlag="'discountRate'; value: 10; default: 5; domain: 'userDomain'; else: numberFeatureElse; initializing: numberFeatureInitializing; reconciling: numberFeatureReconciling">
  This is shown when the feature flag matches the specified discount rate.
</div>
<ng-template #numberFeatureElse>
  This is shown when the feature flag does not match the specified discount rate.
</ng-template>
<ng-template #numberFeatureInitializing>
  This is shown when the feature flag is initializing.
</ng-template>
<ng-template #numberFeatureReconciling>
  This is shown when the feature flag is reconciling.
</ng-template>

String

<div
  *stringFeatureFlag="'themeColor'; value: 'dark'; default: 'light'; domain: 'userDomain'; else: stringFeatureElse; initializing: stringFeatureInitializing; reconciling: stringFeatureReconciling">
  This is shown when the feature flag matches the specified theme color.
</div>
<ng-template #stringFeatureElse>
  This is shown when the feature flag does not match the specified theme color.
</ng-template>
<ng-template #stringFeatureInitializing>
  This is shown when the feature flag is initializing.
</ng-template>
<ng-template #stringFeatureReconciling>
  This is shown when the feature flag is reconciling.
</ng-template>

Object

<div
  *objectFeatureFlag="'userConfig'; value: { theme: 'dark' }; default: { theme: 'light' }; domain: 'userDomain'; else: objectFeatureElse; initializing: objectFeatureInitializing; reconciling: objectFeatureReconciling">
  This is shown when the feature flag matches the specified user configuration.
</div>
<ng-template #objectFeatureElse>
  This is shown when the feature flag does not match the specified user configuration.
</ng-template>
<ng-template #objectFeatureInitializing>
  This is shown when the feature flag is initializing.
</ng-template>
<ng-template #objectFeatureReconciling>
  This is shown when the feature flag is reconciling.
</ng-template>

Required TargetingKey

GO Feature Flag needs a targetingKey to be set on the evaluation context.
This is used to bucket the users into the correct targeting group for the feature flag evaluation.

Don't forget to set a context with a targetingKey in your application.

await OpenFeature.setContext({
  targetingKey: 'user-key',
  // ...
});

Advanced usage

You can check the OpenFeature Angular SDK Documentation to see all the available directives and how to use them.

Available options

Check the available options for the provider in the web provider page.

Contribute to the provider

You can find the source of the provider in the open-feature/js-sdk-contrib repository.