Angular

Installation

Add the OpenFeature SDK and the Tggl Provider to your project:

npm i @openfeature/angular-sdk openfeature-web-tggl-provider

Quick start

First, 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 { TgglWebProvider } from 'openfeature-web-tggl-provider'
 
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    OpenFeatureModule.forRoot({
      provider: new TgglWebProvider('API_KEY'),
    })
  ],
})
 
export class AppModule {
}

You can now conditionally display content:

<div *booleanFeatureFlag="'my-feature'; default: false">
  My feature is enabled
</div>

Conditional rendering

You can use four primary directives to conditionally display content, booleanFeatureFlag, numberFeatureFlag, stringFeatureFlag and objectFeatureFlag. The first value is always the flag's key, followed by the default value if the flag is not found.

<div
  *booleanFeatureFlag="'my-feature'; default: true; else: myFeatureDisabled">
  My feature is true
</div>
<ng-template #myFeatureDisabled>
  My feature is false
</ng-template>

For values other than boolean, the value to compare the evaluation result to can be provided by the value parameter:

<div
  *numberFeatureFlag="'my-feature'; value: 10; default: 5; else: numberFeatureElse">
  My feature is equal to 10
</div>
<ng-template #numberFeatureElse>
  My feature is not equal to 10
</ng-template>

Getting a flag's value

You can use the same directives to get a flag's value:

<div *stringFeatureFlag="'my-feature'; default: 'foo'; let value;">
  The value of the flag is {{ value }}.
</div>

Managing the context

You can update the context at any time to react to changes in your app:

await OpenFeature.setContext({
  userId: 'bar',
  country: 'UK',
  //...
});

setContext is async and will return a promise that resolves once the flags for that new context have been fetched from the API. All your components will be re-rendered with the new flag values.

Polling for "live" updates

If you need your client to be up-to-date with the latest flag configuration, you can enable polling:

new TgglWebProvider('API_KEY', {
  pollingInterval: 5000
})

Here, the provider will poll the Tggl API every 5 seconds for updates. If one of the flag changes, any component that uses this flag will be re-rendered with the new value.

Using the Proxy

By default, the Provider talks directly to the Tggl API. If you are using the Tggl Proxy, you can specify the proxy URL when instantiating the provider:

OpenFeature.setProvider(new TgglWebProvider('API_KEY', {
  baseUrl: 'http://your-proxy-domain.com'
}))

The /flags and /report path will be appended to the baseUrl and both flags evaluation and reporting will go through the proxy. If your proxy is configured with custom paths, you can specify them:

OpenFeature.setProvider(new TgglWebProvider('API_KEY', {
  url: 'http://your-proxy-domain.com/custom-flags',
  reporting: {
    url: 'http://your-proxy-domain.com/custom-report'
  }
}))

Going further

Read the official OpenFeature SDK documentation for more information on how to use the SDK.

You can also have a look at Tggl's Node.js SDK documentation that is used under the hood by the TgglWebProvider.