Angular Unleash Proxy Client

Angular implementation of the unleash-proxy-client.

Installation

1npm install @karelics/angular-unleash-proxy-client

Install unleash-proxy-client if it is not installed yet.

1npm install unleash-proxy-client

Setup

karelics/angular-unleash-proxy-client should be initialized once in AppModule (or bootstrap standalone component).

1import { provideUnleashProxy } from '@karelics/angular-unleash-proxy-client';
2
3providers: [
4  provideUnleashProxy({
5    url: unleash_proxy_url,
6    clientKey: client_key,
7    appName: app_name,
8  }),
9]

Usage

Directives

You can use directives to conditionally show/hide content based on feature flag states:

Single Feature Flag

1<!-- Show content when feature is enabled -->
2<div *featureEnabled="'myFeature'">
3  Feature is enabled
4</div>
5
6<!-- Show content when feature is disabled -->
7<div *featureDisabled="'myFeature'">
8  Feature is disabled
9</div>
10
11<!-- With else template -->
12<div *featureEnabled="'myFeature'; else disabled">
13  Feature is enabled
14</div>
15<ng-template #disabled>
16  Feature is disabled
17</ng-template>

Multiple Feature Flags

1<!-- Show when ANY feature is enabled (OR) -->
2<div *featureEnabled="['feature1', 'feature2']">
3  Either feature1 OR feature2 is enabled
4</div>
5
6<!-- Show when ALL features are enabled (AND) -->
7<div *featureEnabled="['feature1', 'feature2'] operator 'and'">
8  Both feature1 AND feature2 are enabled
9</div>
10
11<!-- With else template -->
12<div *featureEnabled="['feature1', 'feature2'] operator 'and'; else notAllEnabled">
13  All features are enabled
14</div>
15<ng-template #notAllEnabled>
16  Not all features are enabled
17</ng-template>
18
19<!-- Similar usage for featureDisabled -->
20<div *featureDisabled="['feature1', 'feature2'] operator 'or'">
21  Either feature1 OR feature2 is disabled
22</div>

Route Guards

You can protect routes using feature flags:

Single Feature Flag

1const routes: Routes = [
2  {
3    path: 'protected',
4    component: ProtectedComponent,
5    canActivate: [featureEnabled('myFeature')]
6  },
7  {
8    path: 'protected-with-redirect',
9    component: ProtectedComponent,
10    canActivate: [featureEnabled('myFeature', '/access-denied')]
11  }
12];

Multiple Feature Flags

1const routes: Routes = [
2  // Route accessible when ANY feature is enabled
3  {
4    path: 'protected-or',
5    component: ProtectedComponent,
6    canActivate: [featureEnabled(['feature1', 'feature2'])]
7  },
8  // Route accessible when ALL features are enabled
9  {
10    path: 'protected-and',
11    component: ProtectedComponent,
12    canActivate: [featureEnabled(['feature1', 'feature2'], 'and')]
13  },
14  // With redirect URL
15  {
16    path: 'protected-with-redirect',
17    component: ProtectedComponent,
18    canActivate: [featureEnabled(['feature1', 'feature2'], 'and', '/access-denied')]
19  },
20  // Similar usage for featureDisabled
21  {
22    path: 'disabled-features',
23    component: DisabledComponent,
24    canActivate: [featureDisabled(['feature1', 'feature2'], 'or', '/dashboard')]
25  }
26];

Service

You can also use the UnleashService directly. UnleashService has the following logic around original unleash proxy client service:

• wraps original service events into observables
• provides isEnabled/isDisabled methods to check current toggle state
• provides isEnabled$/isDisabled$ methods returning observable to be informed about toggle state changes

Other unleash service features can be accessed with unleash property.

1import { UnleashService } from '@karelics/angular-unleash-proxy-client';
2
3@Injectable()
4export class MyService {
5  private unleashService = inject(UnleashService);
6
7  checkFeature() {
8    // Synchronous check
9    if (this.unleashService.isEnabled('myFeature')) {
10      // Feature is enabled
11    }
12
13    // Reactive check (don't forget to unsubscribe)
14    this.unleashService.isEnabled$('feature_name').pipe(
15      tap(...),
16    ).subscribe();
17  }
18
19  updateContext(): void {
20    this.unleashService.unleash.updateContext(...);
21  }
22}

Updates

Feature toggles state is requested from unleash proxy each time on page load, but by default unleash proxy client every 30 seconds requests updates from unleash proxy to perform runtime changes. If requesting state on page load if enough in your case, you can disable updates using unleash configuration:

1import { provideUnleashProxy } from '@karelics/angular-unleash-proxy-client';
2
3providers: [
4  provideUnleashProxy({
5    ... // other options
6    disableRefresh: true,
7    disableMetrics: true,
8  }),
9]

License

MIT