Skip to content

Commit 24f1b23

Browse files
feat(angular): add docs for setting evaluation context in angular (#1170)
<!-- Please use this template for your pull request. --> <!-- Please use the sections that you need and delete other sections --> Adds docs for setting evaluation context in angular Signed-off-by: Lukas Reining <lukas.reining@codecentric.de>
1 parent 5f85a56 commit 24f1b23

File tree

1 file changed

+75
-17
lines changed
  • packages/angular/projects/angular-sdk

1 file changed

+75
-17
lines changed

packages/angular/projects/angular-sdk/README.md

Lines changed: 75 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,22 @@ In addition to the features provided by the [web sdk](https://openfeature.dev/do
4444

4545
- [Overview](#overview)
4646
- [Quick start](#quick-start)
47-
- [Requirements](#requirements)
48-
- [Install](#install)
49-
- [npm](#npm)
50-
- [yarn](#yarn)
51-
- [Required peer dependencies](#required-peer-dependencies)
52-
- [Usage](#usage)
53-
- [Module](#module)
54-
- [Minimal Example](#minimal-example)
55-
- [How to use](#how-to-use)
56-
- [Boolean Feature Flag](#boolean-feature-flag)
57-
- [Number Feature Flag](#number-feature-flag)
58-
- [String Feature Flag](#string-feature-flag)
59-
- [Object Feature Flag](#object-feature-flag)
60-
- [Opting-out of automatic re-rendering](#opting-out-of-automatic-re-rendering)
61-
- [Consuming the evaluation details](#consuming-the-evaluation-details)
47+
- [Requirements](#requirements)
48+
- [Install](#install)
49+
- [npm](#npm)
50+
- [yarn](#yarn)
51+
- [Required peer dependencies](#required-peer-dependencies)
52+
- [Usage](#usage)
53+
- [Module](#module)
54+
- [Minimal Example](#minimal-example)
55+
- [How to use](#how-to-use)
56+
- [Boolean Feature Flag](#boolean-feature-flag)
57+
- [Number Feature Flag](#number-feature-flag)
58+
- [String Feature Flag](#string-feature-flag)
59+
- [Object Feature Flag](#object-feature-flag)
60+
- [Opting-out of automatic re-rendering](#opting-out-of-automatic-re-rendering)
61+
- [Consuming the evaluation details](#consuming-the-evaluation-details)
62+
- [Setting Evaluation Context](#setting-evaluation-context)
6263
- [FAQ and troubleshooting](#faq-and-troubleshooting)
6364
- [Resources](#resources)
6465

@@ -156,7 +157,7 @@ This parameter is optional, if omitted, the `thenTemplate` will always be render
156157
The `domain` parameter is _optional_ and will be used as domain when getting the OpenFeature provider.
157158

158159
The `updateOnConfigurationChanged` and `updateOnContextChanged` parameter are _optional_ and used to disable the
159-
automatic re-rendering on flag value or context change. They are set to `true` by default.
160+
automatic re-rendering on flag value or contex change. They are set to `true` by default.
160161

161162
The template referenced in `else` will be rendered if the evaluated feature flag is `false` for the `booleanFeatureFlag`
162163
directive and if the `value` does not match evaluated flag value for all other directives.
@@ -281,6 +282,63 @@ This can be used to just render the flag value or details without conditional re
281282
</div>
282283
```
283284

285+
##### Setting evaluation context
286+
287+
To set the initial evaluation context, you can add the `context` parameter to the `OpenFeatureModule` configuration.
288+
This context can be either an object or a factory function that returns an `EvaluationContext`.
289+
290+
> [!TIP]
291+
> Updating the context can be done directly via the global OpenFeature API using `OpenFeature.setContext()`
292+
293+
Here’s how you can define and use the initial client evaluation context:
294+
295+
###### Using a static object
296+
297+
```typescript
298+
import { NgModule } from '@angular/core';
299+
import { CommonModule } from '@angular/common';
300+
import { OpenFeatureModule } from '@openfeature/angular-sdk';
301+
302+
const initialContext = {
303+
user: {
304+
id: 'user123',
305+
role: 'admin',
306+
}
307+
};
308+
309+
@NgModule({
310+
imports: [
311+
CommonModule,
312+
OpenFeatureModule.forRoot({
313+
provider: yourFeatureProvider,
314+
context: initialContext
315+
})
316+
],
317+
})
318+
export class AppModule {}
319+
```
320+
321+
###### Using a factory function
322+
323+
```typescript
324+
import { NgModule } from '@angular/core';
325+
import { CommonModule } from '@angular/common';
326+
import { OpenFeatureModule, EvaluationContext } from '@openfeature/angular-sdk';
327+
328+
const contextFactory = (): EvaluationContext => loadContextFromLocalStorage();
329+
330+
@NgModule({
331+
imports: [
332+
CommonModule,
333+
OpenFeatureModule.forRoot({
334+
provider: yourFeatureProvider,
335+
context: contextFactory
336+
})
337+
],
338+
})
339+
export class AppModule {}
340+
```
341+
284342
## FAQ and troubleshooting
285343

286344
> I can import things form the `@openfeature/angular-sdk`, `@openfeature/web-sdk`, and `@openfeature/core`; which should I use?
@@ -291,4 +349,4 @@ Avoid importing anything from `@openfeature/web-sdk` or `@openfeature/core`.
291349

292350
## Resources
293351

294-
- [Example repo](https://github.com/open-feature/angular-test-app)
352+
- [Example repo](https://github.com/open-feature/angular-test-app)

0 commit comments

Comments
 (0)