> For the complete documentation index, see [llms.txt](https://developer.harness.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.harness.io/feature-management-experimentation/new-to-fme/sdks-and-customer-deployed-components/openfeature-providers/angular-sdk.md).

# OpenFeature Provider for Angular

Integrate your Angular applications with Harness FME using the Angular OpenFeature Provider, a standardized, vendor-agnostic feature flagging API. This provider implements the OpenFeature specification and bridges the OpenFeature SDK with the Harness FME Browser SDK.

This page walks you through installing, configuring, and using the Angular OpenFeature provider to evaluate feature flags in your Angular applications.

### Before you begin <a href="#before-you-begin" id="before-you-begin"></a>

Before you begin, ensure you have the following:

* A valid [Harness FME SDK key](/feature-management-experimentation/new-to-fme/sdks-and-customer-deployed-components.md#api-keys) for your project
* An Angular 14+ project
* Access to your project's `package.json` file to add the provider dependency

### Version compatibility <a href="#version-compatibility" id="version-compatibility"></a>

| Component                                       | Minimum Version |
| ----------------------------------------------- | --------------- |
| Angular                                         | ≥ 14            |
| `@splitsoftware/openfeature-web-split-provider` | ≥ 1.0.0         |
| Harness FME Browser SDK                         | ≥ 10.x          |
| OpenFeature Angular SDK                         | ≥ 0.1.0         |

### Install the provider and dependencies <a href="#install-the-provider-and-dependencies" id="install-the-provider-and-dependencies"></a>

Add the Harness FME OpenFeature provider dependency to your project's `package.json` file.

```bash
npm i @openfeature/angular-sdk @splitsoftware/splitio-browserjs @splitsoftware/openfeature-web-split-provider
```

### Initialize the provider <a href="#initialize-the-provider" id="initialize-the-provider"></a>

The Harness FME OpenFeature provider requires your Harness FME Browser SDK key and a targeting key.

If you are using a traditional `NgModule` setup:

```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OpenFeatureModule } from '@openfeature/angular-sdk';
import { SplitFactory } from '@splitsoftware/splitio-browserjs';
import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider';

const splitFactory = SplitFactory({
  core: {
    authorizationKey: '<YOUR_CLIENT_SIDE_SDK_KEY>',
    key: 'TARGETING_KEY'
  }
});
const openFeatureProvider = new OpenFeatureSplitProvider(splitFactory);

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    OpenFeatureModule.forRoot({
      provider: openFeatureProvider
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

If you are using a standalone bootstrap (Angular 16 or later):

```typescript
import { ApplicationConfig, provideBrowserGlobalErrorListeners, importProvidersFrom } from '@angular/core';
import { OpenFeatureModule } from '@openfeature/angular-sdk';
import { SplitFactory } from '@splitsoftware/splitio-browserjs';
import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider';

const splitFactory = SplitFactory({
  core: {
    authorizationKey: 'CLIENT_SIDE_SDK_KEY',
    key: 'TARGETING_KEY'
  }
});
const openFeatureProvider = new OpenFeatureSplitProvider(splitFactory);

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    importProvidersFrom(
      OpenFeatureModule.forRoot({
        provider: openFeatureProvider
      })
    )
  ]
};
```

### Evaluate feature flags <a href="#evaluate-feature-flags" id="evaluate-feature-flags"></a>

Use the `FeatureFlagService` (which is shown as `splitService` in this example) to evaluate flags through the OpenFeature provider. Specify the feature flag key and a default value in the evaluation method to ensure predictable behavior while the flag resolves.

```typescript
import { FeatureFlagService, EvaluationDetails } from '@openfeature/angular-sdk';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  constructor(private splitService: FeatureFlagService) {}
  
  ngOnInit() {
    this.splitService.getStringDetails('featureFlagName', 'default').subscribe((result: EvaluationDetails<string>) => {
      console.log('Feature flag result:', result.value);
    });
  }
}
```

For more information, go to the [Harness FME Web OpenFeature Provider GitHub repository](https://github.com/splitio/split-openfeature-provider-web-js?tab=readme-ov-file#angular-usage).