Skip to main content
Version: Config V2

Using ConfigCat's OpenFeature Provider in Angular

Getting started​

OpenFeature offers an Angular SDK to streamline the use of OpenFeature in Angular applications. This SDK is built on top of the OpenFeature JavaScript Web SDK.

Since ConfigCat implements a provider for the Web SDK, you can use ConfigCat with the OpenFeature Angular SDK, as explained below.

1. Install the Angular SDK and the ConfigCat provider​

npm i @openfeature/angular-sdk @openfeature/config-cat-web-provider

2. Initialize the Angular SDK​

The ConfigCatWebProvider.create() function takes the SDK key and an optional options argument containing additional configuration options for the underlying ConfigCat client:

  • For applications using modules:

    import { NgModule } from '@angular/core';
    import { BooleanFeatureFlagDirective, type EvaluationContext, OpenFeatureModule } from '@openfeature/angular-sdk';
    import { ConfigCatWebProvider } from '@openfeature/config-cat-web-provider';
    import { createConsoleLogger, LogLevel } from 'configcat-js-ssr';

    const configCatProvider = ConfigCatWebProvider.create('#YOUR-SDK-KEY#', {
      // Specify options for the underlying ConfigCat client
      logger: createConsoleLogger(LogLevel.Info),
      setupHooks: (hooks) => hooks.on('clientReady', () => console.log('Client is ready!')),
      // ...
    });

    // Set the initial context for your evaluations
    const initialContext: EvaluationContext = {
      targetingKey: 'user-1',
      admin: false
    };

    @NgModule({
      declarations: [
        // ...
      ],
      imports: [
        // ...
        OpenFeatureModule.forRoot({
          provider: configCatProvider,
          context: initialContext
        }),
        // Alternatively, you can import the directive directly in your components
        BooleanFeatureFlagDirective
      ],
      exports: [
        // Not needed if you import the directive directly in your components
        BooleanFeatureFlagDirective
      ],
      bootstrap: [/* ... */]
    })
    export class AppModule { }

  • For applications using standalone components:

    import { type ApplicationConfig, importProvidersFrom } from '@angular/core';
    import { type EvaluationContext, OpenFeatureModule } from '@openfeature/angular-sdk';
    import { ConfigCatWebProvider } from '@openfeature/config-cat-web-provider';
    import { createConsoleLogger, LogLevel } from 'configcat-js-ssr';

    const configCatProvider = ConfigCatWebProvider.create('#YOUR-SDK-KEY#', {
      // Specify options for the underlying ConfigCat client
      logger: createConsoleLogger(LogLevel.Info),
      setupHooks: (hooks) => hooks.on('clientReady', () => console.log('Client is ready!')),
      // ...
    });

    // Set the initial context for your evaluations
    const initialContext: EvaluationContext = {
      targetingKey: 'user-1',
      admin: false
    };

    export const appConfig: ApplicationConfig = {
      providers: [
        // ...
        importProvidersFrom(
          OpenFeatureModule.forRoot({
            provider: configCatProvider,
            context: initialContext
          })
        )
      ]
    };

3. Use your feature flag​

<div
  *booleanFeatureFlag="'isAwesomeFeatureEnabled'; default: false; 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>

Evaluation Context​

An evaluation context in the OpenFeature specification is a container for arbitrary contextual data that can be used as a basis for feature flag evaluation.

You can find here how the ConfigCat provider translates these evaluation contexts to ConfigCat User Objects.

Advanced features​

Read the documentation of the OpenFeature Angular SDK to learn more about the advanced capabilities of the SDK.

Look under the hood​