Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference/sdks/client/kotlin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ This content has been automatically generated from kotlin-sdk.
Edits should be made here: https://github.com/open-feature/kotlin-sdk
Once a repo has been updated, docs can be generated by running: yarn update:sdk-docs

Last updated at Thu Dec 04 2025 17:46:52 GMT+0000 (Coordinated Universal Time)
Last updated at Thu Dec 11 2025 08:12:19 GMT+0000 (Coordinated Universal Time)
-->
import MCPInstall from '@site/src/partials/mcp-install';

Expand Down
2 changes: 1 addition & 1 deletion docs/reference/sdks/client/swift.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ This content has been automatically generated from swift-sdk.
Edits should be made here: https://github.com/open-feature/swift-sdk
Once a repo has been updated, docs can be generated by running: yarn update:sdk-docs

Last updated at Thu Dec 04 2025 17:46:52 GMT+0000 (Coordinated Universal Time)
Last updated at Thu Dec 11 2025 08:12:19 GMT+0000 (Coordinated Universal Time)
-->
import MCPInstall from '@site/src/partials/mcp-install';

Expand Down
106 changes: 43 additions & 63 deletions docs/reference/sdks/client/web/angular.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ This content has been automatically generated from js-sdk.
Edits should be made here: https://github.com/open-feature/js-sdk
Once a repo has been updated, docs can be generated by running: yarn update:sdk-docs

Last updated at Thu Dec 04 2025 17:46:52 GMT+0000 (Coordinated Universal Time)
Last updated at Thu Dec 11 2025 08:12:20 GMT+0000 (Coordinated Universal Time)
-->

<p align="center" class="github-badges">
Expand Down Expand Up @@ -94,9 +94,9 @@ yarn add @openfeature/angular-sdk @openfeature/web-sdk @openfeature/core
The following list contains the peer dependencies of `@openfeature/angular-sdk`.
See the [package.json](https://github.com/open-feature/js-sdk/blob/main/packages/angular/projects/angular-sdk/package.json) for the required versions.

* `@openfeature/web-sdk`
* `@angular/common`
* `@angular/core`
- `@openfeature/web-sdk`
- `@angular/common`
- `@angular/core`

### Usage

Expand All @@ -123,11 +123,10 @@ import { OpenFeatureModule } from '@openfeature/angular-sdk';
domain1: new YourOpenFeatureProvider(),
domain2: new YourOtherOpenFeatureProvider(),
},
})
}),
],
})
export class AppModule {
}
export class AppModule {}
```

##### Minimal Example
Expand All @@ -138,9 +137,7 @@ If `initializing` and `reconciling` are not given, the feature flag value that i
determine what will be rendered.

```html
<div *booleanFeatureFlag="'isFeatureEnabled'; default: true">
This is shown when the feature flag is enabled.
</div>
<div *booleanFeatureFlag="'isFeatureEnabled'; default: true">This is shown when the feature flag is enabled.</div>
```

This example shows content when the feature flag `isFeatureEnabled` is true with a default value of true.
Expand Down Expand Up @@ -182,72 +179,58 @@ This parameter is _optional_, if omitted, the `then` and `else` templates will b

```html
<div
*booleanFeatureFlag="'isFeatureEnabled'; default: true; domain: 'userDomain'; else: booleanFeatureElse; initializing: booleanFeatureInitializing; reconciling: booleanFeatureReconciling">
*booleanFeatureFlag="'isFeatureEnabled'; default: true; domain: 'userDomain'; 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>
<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>
```

###### Number Feature Flag

```html
<div
*numberFeatureFlag="'discountRate'; value: 10; default: 5; domain: 'userDomain'; else: numberFeatureElse; initializing: numberFeatureInitializing; reconciling: numberFeatureReconciling">
*numberFeatureFlag="'discountRate'; value: 10; default: 5; domain: 'userDomain'; else: numberFeatureElse; initializing: numberFeatureInitializing; reconciling: numberFeatureReconciling"
>
This is shown when the feature flag matches the specified discount rate.
</div>
<ng-template #numberFeatureElse>
This is shown when the feature flag does not match the specified discount rate.
</ng-template>
<ng-template #numberFeatureInitializing>
This is shown when the feature flag is initializing.
</ng-template>
<ng-template #numberFeatureReconciling>
This is shown when the feature flag is reconciling.
</ng-template>
<ng-template #numberFeatureInitializing> This is shown when the feature flag is initializing. </ng-template>
<ng-template #numberFeatureReconciling> This is shown when the feature flag is reconciling. </ng-template>
```

###### String Feature Flag

```html
<div
*stringFeatureFlag="'themeColor'; value: 'dark'; default: 'light'; domain: 'userDomain'; else: stringFeatureElse; initializing: stringFeatureInitializing; reconciling: stringFeatureReconciling">
*stringFeatureFlag="'themeColor'; value: 'dark'; default: 'light'; domain: 'userDomain'; else: stringFeatureElse; initializing: stringFeatureInitializing; reconciling: stringFeatureReconciling"
>
This is shown when the feature flag matches the specified theme color.
</div>
<ng-template #stringFeatureElse>
This is shown when the feature flag does not match the specified theme color.
</ng-template>
<ng-template #stringFeatureInitializing>
This is shown when the feature flag is initializing.
</ng-template>
<ng-template #stringFeatureReconciling>
This is shown when the feature flag is reconciling.
</ng-template>
<ng-template #stringFeatureInitializing> This is shown when the feature flag is initializing. </ng-template>
<ng-template #stringFeatureReconciling> This is shown when the feature flag is reconciling. </ng-template>
```

###### Object Feature Flag

```html
<div
*objectFeatureFlag="'userConfig'; value: { theme: 'dark' }; default: { theme: 'light' }; domain: 'userDomain'; else: objectFeatureElse; initializing: objectFeatureInitializing; reconciling: objectFeatureReconciling">
*objectFeatureFlag="'userConfig'; value: { theme: 'dark' }; default: { theme: 'light' }; domain: 'userDomain'; else: objectFeatureElse; initializing: objectFeatureInitializing; reconciling: objectFeatureReconciling"
>
This is shown when the feature flag matches the specified user configuration.
</div>
<ng-template #objectFeatureElse>
This is shown when the feature flag does not match the specified user configuration.
</ng-template>
<ng-template #objectFeatureInitializing>
This is shown when the feature flag is initializing.
</ng-template>
<ng-template #objectFeatureReconciling>
This is shown when the feature flag is reconciling.
</ng-template>
<ng-template #objectFeatureInitializing> This is shown when the feature flag is initializing. </ng-template>
<ng-template #objectFeatureReconciling> This is shown when the feature flag is reconciling. </ng-template>
```

###### Opting-out of automatic re-rendering
Expand All @@ -257,7 +240,9 @@ By default, the directive re-renders when the flag value changes or the context
In cases, this is not desired, re-rendering can be disabled for both events:

```html
<div *booleanFeatureFlag="'isFeatureEnabled'; default: true; updateOnContextChanged: false; updateOnConfigurationChanged: false;">
<div
*booleanFeatureFlag="'isFeatureEnabled'; default: true; updateOnContextChanged: false; updateOnConfigurationChanged: false;"
>
This is shown when the feature flag is enabled.
</div>
```
Expand All @@ -274,23 +259,20 @@ The following example shows `value` being implicitly bound and `details` being b

```html
<div
*stringFeatureFlag="'themeColor'; value: 'dark'; default: 'light'; else: stringFeatureElse; let value; let details = evaluationDetails">
It was a match!
The theme color is {{ value }} because of {{ details.reason }}
*stringFeatureFlag="'themeColor'; value: 'dark'; default: 'light'; else: stringFeatureElse; let value; let details = evaluationDetails"
>
It was a match! The theme color is {{ value }} because of {{ details.reason }}
</div>
<ng-template #stringFeatureElse let-value let-details='evaluationDetails'>
It was no match!
The theme color is {{ value }} because of {{ details.reason }}
<ng-template #stringFeatureElse let-value let-details="evaluationDetails">
It was no match! The theme color is {{ value }} because of {{ details.reason }}
</ng-template>
```

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
<div *stringFeatureFlag="'themeColor'; default: 'light'; let value;">
The theme color is {{ value }}.
</div>
<div *stringFeatureFlag="'themeColor'; default: 'light'; let value;">The theme color is {{ value }}.</div>
```

##### FeatureFlagService
Expand All @@ -315,7 +297,7 @@ import { FeatureFlagService } from '@openfeature/angular-sdk';
</div>
<div>Theme: {{ (currentTheme$ | async)?.value }}</div>
<div>Max items: {{ (maxItems$ | async)?.value }}</div>
`
`,
})
export class MyComponent {
private flagService = inject(FeatureFlagService);
Expand Down Expand Up @@ -347,11 +329,9 @@ import { FeatureFlagService } from '@openfeature/angular-sdk';
selector: 'my-component',
standalone: true,
template: `
<div *ngIf="isFeatureEnabled()?.value">
Feature is enabled! Reason: {{ isFeatureEnabled()?.reason }}
</div>
<div *ngIf="isFeatureEnabled()?.value">Feature is enabled! Reason: {{ isFeatureEnabled()?.reason }}</div>
<div>Theme: {{ currentTheme()?.value }}</div>
`
`,
})
export class MyComponent {
private flagService = inject(FeatureFlagService);
Expand All @@ -368,8 +348,8 @@ The service methods accept the [same options as the directives](#opting-out-of-a

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

Expand All @@ -394,16 +374,16 @@ const initialContext = {
user: {
id: 'user123',
role: 'admin',
}
},
};

@NgModule({
imports: [
CommonModule,
OpenFeatureModule.forRoot({
provider: yourFeatureProvider,
context: initialContext
})
context: initialContext,
}),
],
})
export class AppModule {}
Expand All @@ -423,8 +403,8 @@ const contextFactory = (): EvaluationContext => loadContextFromLocalStorage();
CommonModule,
OpenFeatureModule.forRoot({
provider: yourFeatureProvider,
context: contextFactory
})
context: contextFactory,
}),
],
})
export class AppModule {}
Expand Down
Loading