Angular wrapper for unleash-proxy-client.
Unleash proxy server should be run and configured.
Install @karelics/angular-unleash-proxy-client from NPM.
npm install @karelics/angular-unleash-proxy-client
Install unleash-proxy-client if it is not installed yet.
npm install unleash-proxy-client
karelics/angular-unleash-proxy-client should be initialized once in AppModule (or bootstrap standalone component).
import { provideUnleashProxy } from '@karelics/angular-unleash-proxy-client';
providers: [
provideUnleashProxy({
url: unleash_proxy_url,
clientKey: client_key,
appName: app_name,
}),
]
You can define else template similar to *ngIf directive.
<div *featureEnabled="'feature_name'; else disabledTmpl">enabled</div>
<ng-template #disabledTmpl>disabled</ng-template>
<div *featureDisabled="'feature_name'">disabled</div>
Optionally you can define route to redirect if feature toggle condition was not met.
const routes: Routes = [
{
path: 'a',
canActivate:[
featureEnabled('feature_name'),
],
component: AComponent,
},
{
path: 'b',
canActivate:[
featureDisabled('feature_name', 'c'),
],
component: BComponent,
},
{
path: 'c',
component: CComponent,
}
];
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.
import { UnleashService } from '@karelics/angular-unleash-proxy-client';
@Injectable()
export class MyService {
constructor(
private unleashService: UnleashService,
) {
// don't forget to unsubscribe
this.unleashService.isEnabled$('feature_name').pipe(
tap(...),
).subscribe();
}
methodA(): void {
if (this.unleashService.isDisabled('feature_name')) {
...
}
}
methodB(): void {
this.unleashService.unleash.updateContext(...);
}
}
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:
import { provideUnleashProxy } from '@karelics/angular-unleash-proxy-client';
providers: [
provideUnleashProxy({
... // other options
disableRefresh: true,
disableMetrics: true,
}),
]