@@ -10,7 +10,7 @@ This content has been automatically generated from js-sdk.
1010Edits should be made here: https://github.com/open-feature/js-sdk
1111Once a repo has been updated, docs can be generated by running: yarn update :sdk-docs
1212
13- Last updated at Thu Dec 04 2025 17:46:52 GMT+0000 (Coordinated Universal Time)
13+ Last updated at Thu Dec 11 2025 08:12:20 GMT+0000 (Coordinated Universal Time)
1414-->
1515
1616<p align = " center" class = " github-badges" >
@@ -94,9 +94,9 @@ yarn add @openfeature/angular-sdk @openfeature/web-sdk @openfeature/core
9494The following list contains the peer dependencies of ` @openfeature/angular-sdk ` .
9595See the [ package.json] ( https://github.com/open-feature/js-sdk/blob/main/packages/angular/projects/angular-sdk/package.json ) for the required versions.
9696
97- * ` @openfeature/web-sdk `
98- * ` @angular/common `
99- * ` @angular/core `
97+ - ` @openfeature/web-sdk `
98+ - ` @angular/common `
99+ - ` @angular/core `
100100
101101### Usage
102102
@@ -123,11 +123,10 @@ import { OpenFeatureModule } from '@openfeature/angular-sdk';
123123 domain1: new YourOpenFeatureProvider (),
124124 domain2: new YourOtherOpenFeatureProvider (),
125125 },
126- })
126+ }),
127127 ],
128128})
129- export class AppModule {
130- }
129+ export class AppModule {}
131130```
132131
133132##### Minimal Example
@@ -138,9 +137,7 @@ If `initializing` and `reconciling` are not given, the feature flag value that i
138137determine what will be rendered.
139138
140139``` html
141- <div *booleanFeatureFlag =" 'isFeatureEnabled'; default: true" >
142- This is shown when the feature flag is enabled.
143- </div >
140+ <div *booleanFeatureFlag =" 'isFeatureEnabled'; default: true" >This is shown when the feature flag is enabled.</div >
144141```
145142
146143This example shows content when the feature flag ` isFeatureEnabled ` is true with a default value of true.
@@ -182,72 +179,58 @@ This parameter is _optional_, if omitted, the `then` and `else` templates will b
182179
183180``` html
184181<div
185- *booleanFeatureFlag =" 'isFeatureEnabled'; default: true; domain: 'userDomain'; else: booleanFeatureElse; initializing: booleanFeatureInitializing; reconciling: booleanFeatureReconciling" >
182+ *booleanFeatureFlag =" 'isFeatureEnabled'; default: true; domain: 'userDomain'; else: booleanFeatureElse; initializing: booleanFeatureInitializing; reconciling: booleanFeatureReconciling"
183+ >
186184 This is shown when the feature flag is enabled.
187185</div >
188- <ng-template #booleanFeatureElse >
189- This is shown when the feature flag is disabled.
190- </ng-template >
191- <ng-template #booleanFeatureInitializing >
192- This is shown when the feature flag is initializing.
193- </ng-template >
194- <ng-template #booleanFeatureReconciling >
195- This is shown when the feature flag is reconciling.
196- </ng-template >
186+ <ng-template #booleanFeatureElse > This is shown when the feature flag is disabled. </ng-template >
187+ <ng-template #booleanFeatureInitializing > This is shown when the feature flag is initializing. </ng-template >
188+ <ng-template #booleanFeatureReconciling > This is shown when the feature flag is reconciling. </ng-template >
197189```
198190
199191###### Number Feature Flag
200192
201193``` html
202194<div
203- *numberFeatureFlag =" 'discountRate'; value: 10; default: 5; domain: 'userDomain'; else: numberFeatureElse; initializing: numberFeatureInitializing; reconciling: numberFeatureReconciling" >
195+ *numberFeatureFlag =" 'discountRate'; value: 10; default: 5; domain: 'userDomain'; else: numberFeatureElse; initializing: numberFeatureInitializing; reconciling: numberFeatureReconciling"
196+ >
204197 This is shown when the feature flag matches the specified discount rate.
205198</div >
206199<ng-template #numberFeatureElse >
207200 This is shown when the feature flag does not match the specified discount rate.
208201</ng-template >
209- <ng-template #numberFeatureInitializing >
210- This is shown when the feature flag is initializing.
211- </ng-template >
212- <ng-template #numberFeatureReconciling >
213- This is shown when the feature flag is reconciling.
214- </ng-template >
202+ <ng-template #numberFeatureInitializing > This is shown when the feature flag is initializing. </ng-template >
203+ <ng-template #numberFeatureReconciling > This is shown when the feature flag is reconciling. </ng-template >
215204```
216205
217206###### String Feature Flag
218207
219208``` html
220209<div
221- *stringFeatureFlag =" 'themeColor'; value: 'dark'; default: 'light'; domain: 'userDomain'; else: stringFeatureElse; initializing: stringFeatureInitializing; reconciling: stringFeatureReconciling" >
210+ *stringFeatureFlag =" 'themeColor'; value: 'dark'; default: 'light'; domain: 'userDomain'; else: stringFeatureElse; initializing: stringFeatureInitializing; reconciling: stringFeatureReconciling"
211+ >
222212 This is shown when the feature flag matches the specified theme color.
223213</div >
224214<ng-template #stringFeatureElse >
225215 This is shown when the feature flag does not match the specified theme color.
226216</ng-template >
227- <ng-template #stringFeatureInitializing >
228- This is shown when the feature flag is initializing.
229- </ng-template >
230- <ng-template #stringFeatureReconciling >
231- This is shown when the feature flag is reconciling.
232- </ng-template >
217+ <ng-template #stringFeatureInitializing > This is shown when the feature flag is initializing. </ng-template >
218+ <ng-template #stringFeatureReconciling > This is shown when the feature flag is reconciling. </ng-template >
233219```
234220
235221###### Object Feature Flag
236222
237223``` html
238224<div
239- *objectFeatureFlag =" 'userConfig'; value: { theme: 'dark' }; default: { theme: 'light' }; domain: 'userDomain'; else: objectFeatureElse; initializing: objectFeatureInitializing; reconciling: objectFeatureReconciling" >
225+ *objectFeatureFlag =" 'userConfig'; value: { theme: 'dark' }; default: { theme: 'light' }; domain: 'userDomain'; else: objectFeatureElse; initializing: objectFeatureInitializing; reconciling: objectFeatureReconciling"
226+ >
240227 This is shown when the feature flag matches the specified user configuration.
241228</div >
242229<ng-template #objectFeatureElse >
243230 This is shown when the feature flag does not match the specified user configuration.
244231</ng-template >
245- <ng-template #objectFeatureInitializing >
246- This is shown when the feature flag is initializing.
247- </ng-template >
248- <ng-template #objectFeatureReconciling >
249- This is shown when the feature flag is reconciling.
250- </ng-template >
232+ <ng-template #objectFeatureInitializing > This is shown when the feature flag is initializing. </ng-template >
233+ <ng-template #objectFeatureReconciling > This is shown when the feature flag is reconciling. </ng-template >
251234```
252235
253236###### Opting-out of automatic re-rendering
@@ -257,7 +240,9 @@ By default, the directive re-renders when the flag value changes or the context
257240In cases, this is not desired, re-rendering can be disabled for both events:
258241
259242``` html
260- <div *booleanFeatureFlag =" 'isFeatureEnabled'; default: true; updateOnContextChanged: false; updateOnConfigurationChanged: false;" >
243+ <div
244+ *booleanFeatureFlag =" 'isFeatureEnabled'; default: true; updateOnContextChanged: false; updateOnConfigurationChanged: false;"
245+ >
261246 This is shown when the feature flag is enabled.
262247</div >
263248```
@@ -274,23 +259,20 @@ The following example shows `value` being implicitly bound and `details` being b
274259
275260``` html
276261<div
277- *stringFeatureFlag =" 'themeColor'; value: 'dark'; default: 'light'; else: stringFeatureElse; let value; let details = evaluationDetails" >
278- It was a match!
279- The theme color is {{ value }} because of {{ details.reason }}
262+ *stringFeatureFlag =" 'themeColor'; value: 'dark'; default: 'light'; else: stringFeatureElse; let value; let details = evaluationDetails"
263+ >
264+ It was a match! The theme color is {{ value }} because of {{ details.reason }}
280265</div >
281- <ng-template #stringFeatureElse let-value let-details =' evaluationDetails' >
282- It was no match!
283- The theme color is {{ value }} because of {{ details.reason }}
266+ <ng-template #stringFeatureElse let-value let-details =" evaluationDetails" >
267+ It was no match! The theme color is {{ value }} because of {{ details.reason }}
284268</ng-template >
285269```
286270
287271When the expected flag value is omitted, the template will always be rendered.
288272This can be used to just render the flag value or details without conditional rendering.
289273
290274``` html
291- <div *stringFeatureFlag =" 'themeColor'; default: 'light'; let value;" >
292- The theme color is {{ value }}.
293- </div >
275+ <div *stringFeatureFlag =" 'themeColor'; default: 'light'; let value;" >The theme color is {{ value }}.</div >
294276```
295277
296278##### FeatureFlagService
@@ -315,7 +297,7 @@ import { FeatureFlagService } from '@openfeature/angular-sdk';
315297 </div>
316298 <div>Theme: {{ (currentTheme$ | async)?.value }}</div>
317299 <div>Max items: {{ (maxItems$ | async)?.value }}</div>
318- `
300+ ` ,
319301})
320302export class MyComponent {
321303 private flagService = inject (FeatureFlagService );
@@ -347,11 +329,9 @@ import { FeatureFlagService } from '@openfeature/angular-sdk';
347329 selector: ' my-component' ,
348330 standalone: true ,
349331 template: `
350- <div *ngIf="isFeatureEnabled()?.value">
351- Feature is enabled! Reason: {{ isFeatureEnabled()?.reason }}
352- </div>
332+ <div *ngIf="isFeatureEnabled()?.value">Feature is enabled! Reason: {{ isFeatureEnabled()?.reason }}</div>
353333 <div>Theme: {{ currentTheme()?.value }}</div>
354- `
334+ ` ,
355335})
356336export class MyComponent {
357337 private flagService = inject (FeatureFlagService );
@@ -368,8 +348,8 @@ The service methods accept the [same options as the directives](#opting-out-of-a
368348
369349``` typescript
370350const flag$ = this .flagService .getBooleanDetails (' my-flag' , false , ' my-domain' , {
371- updateOnConfigurationChanged: false , // default: true
372- updateOnContextChanged: false , // default: true
351+ updateOnConfigurationChanged: false , // default: true
352+ updateOnContextChanged: false , // default: true
373353});
374354```
375355
@@ -394,16 +374,16 @@ const initialContext = {
394374 user: {
395375 id: ' user123' ,
396376 role: ' admin' ,
397- }
377+ },
398378};
399379
400380@NgModule ({
401381 imports: [
402382 CommonModule ,
403383 OpenFeatureModule .forRoot ({
404384 provider: yourFeatureProvider ,
405- context: initialContext
406- })
385+ context: initialContext ,
386+ }),
407387 ],
408388})
409389export class AppModule {}
@@ -423,8 +403,8 @@ const contextFactory = (): EvaluationContext => loadContextFromLocalStorage();
423403 CommonModule ,
424404 OpenFeatureModule .forRoot ({
425405 provider: yourFeatureProvider ,
426- context: contextFactory
427- })
406+ context: contextFactory ,
407+ }),
428408 ],
429409})
430410export class AppModule {}
0 commit comments