@openfeature/angular-sdk - npm explorer

It was no match! The theme color is {{ value }} because of {{ details.reason }}

`

When the expected flag value is omitted, the template will always be rendered.
This can be used to just render the flag value or details without conditional rendering.

`html

The theme color is {{ value }}.

`

##### FeatureFlagService

The FeatureFlagService provides programmatic access to feature flags through reactive patterns. All methods return
Observables that automatically emit new values when flag configurations or evaluation context changes.

###### Using with Observables

`typescript
import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { FeatureFlagService } from '@openfeature/angular-sdk';

@Component({
selector: 'my-component',
standalone: true,
imports: [AsyncPipe],
template:


Feature is enabled! Reason: {{ (isFeatureEnabled$ | async)?.reason }}

Theme: {{ (currentTheme$ | async)?.value }}

Max items: {{ (maxItems$ | async)?.value }}

,
})
export class MyComponent {
private flagService = inject(FeatureFlagService);

// Boolean flag
isFeatureEnabled$ = this.flagService.getBooleanDetails('my-feature', false);

// String flag
currentTheme$ = this.flagService.getStringDetails('theme', 'light');

// Number flag
maxItems$ = this.flagService.getNumberDetails('max-items', 10);

// Object flag with type safety
config$ = this.flagService.getObjectDetails<{ timeout: number }>('api-config', { timeout: 5000 });
}
`

###### Using with Angular Signals

You can convert any Observable from the service to an Angular Signal using toSignal():

`typescript
import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { FeatureFlagService } from '@openfeature/angular-sdk';

@Component({
selector: 'my-component',
standalone: true,
template:

Feature is enabled! Reason: {{ isFeatureEnabled()?.reason }}

Theme: {{ currentTheme()?.value }}

,
})
export class MyComponent {
private flagService = inject(FeatureFlagService);

// Convert Observables to Signals
isFeatureEnabled = toSignal(this.flagService.getBooleanDetails('my-feature', false));
currentTheme = toSignal(this.flagService.getStringDetails('theme', 'light'));
}
`

###### Service Options

The service methods accept the same options as the directives:

`typescript
const flag$ = this.flagService.getBooleanDetails('my-flag', false, 'my-domain', {
updateOnConfigurationChanged: false, // default: true
updateOnContextChanged: false, // default: true
});
`

##### Setting evaluation context

To set the initial evaluation context, you can add the context parameter to the OpenFeatureModule configuration.
This context can be either an object or a factory function that returns an EvaluationContext.

> [!TIP]
> Updating the context can be done directly via the global OpenFeature API using OpenFeature.setContext()

Here’s how you can define and use the initial client evaluation context:

###### Using a static object

`typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OpenFeatureModule } from '@openfeature/angular-sdk';

const initialContext = {
user: {
id: 'user123',
role: 'admin',
},
};

@NgModule({
imports: [
CommonModule,
OpenFeatureModule.forRoot({
provider: yourFeatureProvider,
context: initialContext,
}),
],
})
export class AppModule {}
`

###### Using a factory function

`typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OpenFeatureModule, EvaluationContext } from '@openfeature/angular-sdk';

const contextFactory = (): EvaluationContext => loadContextFromLocalStorage();

@NgModule({
imports: [
CommonModule,
OpenFeatureModule.forRoot({
provider: yourFeatureProvider,
context: contextFactory,
}),
],
})
export class AppModule {}
`

##### Observability considerations

Angular's lifecycle can result in flags being evaluated multiple times as a user interacts with a page.
If you are using an OpenFeature hook for telemetry, this can result in inflated evaluation metrics.
The OpenFeature debounce hook can help
to reduce the amount of redundant evaluations reported to your observability platform by limiting the frequency at which
evaluation metrics are reported.

FAQ and troubleshooting

> I can import things form the @openfeature/angular-sdk, @openfeature/web-sdk, and @openfeature/core; which should I use?

The @openfeature/angular-sdk re-exports everything from its peers (@openfeature/web-sdk and @openfeature/core),
and adds the Angular-specific features.
You can import everything from the @openfeature/angular-sdk directly.
Avoid importing anything from @openfeature/web-sdk or @openfeature/core`.

Resources

- Example repo