Skip to content

Commit 165a610

Browse files
toddbaerttoddbaert
authored
blog: announcing-angular-sdk (#691)
Adds Angular blog post. It looks a lot like the React post, structurally, but focuses on angular stuff obviously. Since @lukas-reining did 90% of the work I made him a co-author of this post, so his review is required. **DIRECT PREVIEW: https://deploy-preview-691--openfeature.netlify.app/blog/announcing-angular-sdk** --------- Signed-off-by: Todd Baert <[email protected]>
1 parent b382b5b commit 165a610

File tree

6 files changed

+136
-4
lines changed

6 files changed

+136
-4
lines changed

‎.nvmrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
v18.19
1+
v18

‎blog/2024-09-17-announcing-angular-sdk.md‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
slug: 'announcing-angular-sdk'
3+
title: 'Announcing the OpenFeature Angular SDK!'
4+
date: 2024-09-17
5+
authors: [lukasreining, toddbaert]
6+
image: /img/blog/2024-09-17-announcing-angular-sdk/angular.png
7+
description: "Announcing the first official release of the OpenFeature Angular SDK!"
8+
tags: [angular, ng, sdk, ts, js, javascript, web]
9+
draft: false
10+
---
11+
12+
We are excited to unveil the first official release of the [@openfeature/angular-sdk](/docs/reference/technologies/client/web/angular)! 🚀
13+
This SDK extends OpenFeature capabilities to Angular applications, with a focus on Angular's unique patterns and practices.
14+
In this post, we’ll walk you through some of the standout features and how they integrate seamlessly with Angular development.
15+
16+
<!--truncate-->
17+
18+
<img src={require('@site/static/img/blog/2024-09-17-announcing-angular-sdk/angular.png').default} />
19+
20+
## Features
21+
22+
### Angular Module System Integration
23+
24+
The Angular SDK exports a module that allows you to configure your [OpenFeature provider](https://openfeature.dev/docs/reference/concepts/provider) using Angular constructs.
25+
You can set your default provider, and optionally configure additional providers for other domains.
26+
Besides configuring your provider, you'll also need to use the `OpenFeatureModule` in order to utilize the other features of the SDK.
27+
28+
```ts
29+
import { NgModule } from '@angular/core';
30+
import { CommonModule } from '@angular/common';
31+
import { OpenFeatureModule } from '@openfeature/angular-sdk';
32+
33+
@NgModule({
34+
declarations: [
35+
// Other components
36+
],
37+
imports: [
38+
CommonModule,
39+
OpenFeatureModule.forRoot({
40+
provider: new YourOpenFeatureProvider(),
41+
// domainBoundProviders are optional, mostly needed if more than one provider is needed
42+
domainBoundProviders: {
43+
domain1: new YourOtherOpenFeatureProvider(),
44+
domain2: new YourOtherOtherOpenFeatureProvider(),
45+
},
46+
})
47+
],
48+
})
49+
export class AppModule {
50+
}
51+
```
52+
53+
### Easy Templating with Directives
54+
55+
Perhaps the most useful part of the Angular SDK is the inclusion of the built in evaluation directives.
56+
These directives handle all the flag evaluation boilerplate for you, using Angular's directive abstractions which add functionality to elements.
57+
In its most basic form, the directive differentially renders templates based on the flag evaluation result:
58+
59+
```html
60+
<!-- evaluate a flag called new-message and show a render a different template based on the result -->
61+
<div
62+
*booleanFeatureFlag="'new-message'; default: true; else: booleanFeatureElse;">
63+
<p>Welcome to this OpenFeature-enabled Angular app!</p>
64+
</div>
65+
<ng-template #booleanFeatureElse>
66+
<p>Welcome to this Angular app.</p>
67+
</ng-template>
68+
```
69+
70+
String, Numeric, and Object flags are also supported.
71+
For these, you can supply templates based by matching against the returned flag value:
72+
73+
```html
74+
<!-- render this template if the value == 10 -->
75+
<div
76+
*numberFeatureFlag="'discountRate'; value: 10; default: 5; else: numberFeatureElse">
77+
This is shown when the feature flag matches the specified discount rate.
78+
</div>
79+
<!-- render this template if the value != 10 -->
80+
<ng-template #numberFeatureElse>
81+
This is shown when the feature flag does not match the specified discount rate.
82+
</ng-template>
83+
```
84+
85+
Additionally, it's possible to bind the evaluation result and related metadata to the template by omitting the `value` to match:
86+
87+
```html
88+
<!-- omitting the `value` to match against unconditionally renders this template -->
89+
<div *stringFeatureFlag="'themeColor'; default: 'light'; let value;">
90+
The theme color is {{ value }}.
91+
</div>
92+
```
93+
94+
### Loading and Automatic Re-Rendering
95+
96+
You may want to hide some content until your provider is ready.
97+
For this reason, the directives support specifying templates to render before your provider is ready, and while it's [reconciling its state](https://openfeature.dev/docs/reference/concepts/sdk-paradigms#static-context-paradigms-client-side-sdks) after context changes.
98+
The directive will automatically re-render when the provider's readiness changes, or if the flag values themselves change.
99+
100+
```html
101+
<!-- render different templates based on the readiness of the flag provider -->
102+
<div
103+
*booleanFeatureFlag="'my-feature'; default: true; else: booleanFeatureElse; initializing: booleanFeatureInitializing; reconciling: booleanFeatureReconciling">
104+
<p>This is shown when the feature flag is enabled.</p>
105+
</div>
106+
<ng-template #booleanFeatureElse>
107+
<p>This is shown when the feature flag is disabled.</p>
108+
</ng-template>
109+
<ng-template #booleanFeatureInitializing>
110+
<p>This is shown when the feature flag is initializing.</p>
111+
</ng-template>
112+
<ng-template #booleanFeatureReconciling>
113+
<p>This is shown when the feature flag is reconciling.</p>
114+
</ng-template>
115+
```
116+
117+
## Compatibility
118+
119+
As with other framework-specific SDKs, the Angular SDK is built on top of the existing `@openfeature/web-sdk`.
120+
Any OpenFeature provider built to support the web SDK can also be used with the `@openfeature/angular-sdk`, no changes required.
121+
122+
## Looking Ahead
123+
124+
We’re eager to expand the Angular SDK’s capabilities with future updates!
125+
If you're an Angular developer or interested in exploring how feature flags can enhance your applications, we encourage you to try out the OpenFeature Angular SDK.
126+
Happy coding! 🎉

‎blog/authors.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,9 @@ andrewdmaclean:
7575
title: Developer Relations at DevCycle
7676
url: https://github.com/andrewdmaclean
7777
image_url: https://github.com/andrewdmaclean.png
78+
79+
lukasreining:
80+
name: Lukas Reining
81+
title: IT Consultant at codecentric, OpenFeature maintainer
82+
url: https://github.com/lukas-reining
83+
image_url: https://github.com/lukas-reining.png

‎docusaurus.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,9 @@ const themeConfig: ThemeCommonConfig & AlgoliaThemeConfig = {
8989
],
9090
},
9191
announcementBar: {
92-
id: 'dotnetV2',
92+
id: 'announcing-angular-sdk',
9393
content:
94-
'We\'ve just released the OpenFeature SDK for .NET v2.0! Learn more <a href="/blog/dotnet-sdk-v2">here</a>!',
94+
'Psst! We\'ve released a brand new SDK for Angular. Read more <a href="/blog/announcing-angular-sdk">here</a>!',
9595
},
9696
footer: {
9797
style: 'dark',

‎makefile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
VOLUMES := -v $(CURDIR):$(CURDIR) -w $(CURDIR)
3-
IMAGE := node:18.19-bullseye
3+
IMAGE := node:18-bullseye
44
PORT := -p 3000:3000
55
DOCKER := docker run --rm $(VOLUMES) $(IMAGE)
66
DOCKER_I := docker run -ti --rm $(VOLUMES) $(PORT) $(IMAGE)

‎static/img/blog/2024-09-17-announcing-angular-sdk/angular.png‎

27.1 KB
Loading

0 commit comments

Comments
 (0)