Quickstart

ngx-flagr is a library built to support feature flags management. It provides a set of Angular classes that you can use to easily and efficiently manage feature flags.

Installation

npm

npm install @ngx-flagr/core

Yarn

yarn add @ngx-flagr/core

pnpm

pnpm add @ngx-flagr/core

Creating the FeatureFlagService

For the feature flags evaluation, ngx-flagr based itself on a service dedicated to their evaluation.

In order for the library to work, we will need to provide an implementation for it:

simplest-feature-flag.service.ts

import { Injectable } from '@angular/core';

import { FeatureFlagService, FeatureFlag } from '@ngx-flagr/core';

@Injectable({ providedIn: 'root' })
export class SimplestFeatureFlagService implements FeatureFlagService {
  isEnabled(featureFlag: FeatureFlag): boolean {
    return true;
  }
}

Initializing ngx-flagr

Using either the provideNgxFlagr or the NgxFlagrModule.forRoot methods, indicate which FeatureFlagService should be used by ngx-flagr:

Using providers

main.ts

import { bootstrapApplication } from '@angular/platform-browser';

import { provideNgxFlagr } from '@ngx-flagr/core';

import { AppComponent } from './app/app.component';
import { SimplestFeatureFlagService } from './app/simplest-feature-flag.service';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgxFlagr({ featureFlagService: SimplestFeatureFlagService }),
  ],
}).catch(err => console.error(err));

Using a module

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { NgxFlagrModule } from '@ngx-flagr/core';

import { AppComponent } from './app.component';
import { SimplestFeatureFlagService } from './simplest-feature-flag.service';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxFlagrModule.forRoot({ featureFlagService: SimplestFeatureFlagService }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usage

Once everything is wired-up, ngx-flagr is ready to be used.

Directives

The FeatureFlagDirective allows you to control which template is rendered based on the evaluation of the provided feature flag.

Additionally, you can specify what should be rendered if it is not enabled:

@Component({
  selector: '...',
  standalone: true,
  imports: [FeatureFlagDirective],
  template: `
    <div *featureFlag="'my-feature'; else disabledContent">
      'my-feature' feature flag is enabled.
    </div>

    <ng-template #disabledContent>
      'my-feature' feature flag is disabled.
    </ng-template>
  `
})
export class MyComponent {}

Guards

Using the canMatchFeatureFlag CanMatchFn, you can restrict routes and redirect the user based on the feature flags evaluation.

Alternatively, you can redirect the user if it is not enabled:

export const routes: Route[] = [
  {
    path: 'some-feature',
    component: SomeFeatureComponent,
    data: { featureFlag: 'segment-1' },
    canMatch: [ canMatchFeatureFlag ],
  },
  {
    path: 'new-feature',
    component: NewFeatureComponent,
    data: {
      featureFlag: 'segment-2',
      redirectToIfDisabled: 'default-feature',  // 👈 With redirection
    },
    canMatch: [ canMatchFeatureFlag ],
  },
];

Preloading Strategies

Using the FeatureFlagPreloadingStrategy you can speed up the loading of lazyly loaded routes based on the feature flags that decorates them.

You first need to specify the Route's feature flags:

export const routes: Route[] = [
  {
    path: 'premium-shipping',
    loadComponent: () => import('./app/feature/premium-shipping.component').then(
      (m) => m.CustomComponent
    ),
    data: { featureFlag: 'my-feature' },
  },
];

And then use the PreloadingStrategy in your Router's configuration:

Using providers

main.ts

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withPreloading(FeatureFlagPreloadingStrategy)),
  ],
});

Using a module

app.module.ts

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: FeatureFlagPreloadingStrategy }),
  ],
})
export class AppModule { }

Additional Resources

To learn more about ngx-flagr, its features and how to configure it, you can check the detailed documentation.