Getting Started

To get started with ngx-flagr, the first package you will need is @ngx-flagr/core. This package contains the core functionality of the library, including feature flag evaluation and management.

Installation

To get started with ngx-flagr, the root package that you will need is the @ngx-flagr/core, containing the core of the library.

You may further extand the behavior of the library by adding other packages on the top of it for various purpose, such as integrations with your feature flags provider.

npm

npm install @ngx-flagr/core

Yarn

yarn add @ngx-flagr/core

pnpm

pnpm add @ngx-flagr/core

Usage

Once the library is installed all what's left is for us to configure it.

You can do so either by using the provider, favored for the standalone API, or the former way, in your app.module.ts:

Using providers

In the main.ts file, you can call provideNgxFlagr in the providers array and pass in which service should be used for the feature flags evaluation:

main.ts

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

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

import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgxFlagr({
      featureFlagService: MapBasedFeatureFlagService.createFromEntries({
        'feature 1': true,
        'feature 2': false,
      }),
    }),
  ],
});

Using a module

app.module.ts

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

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxFlagrModule.forRoot({
      featureFlagService: MapBasedFeatureFlagService.createFromEntries({
        'feature 1': true,
        'feature 2': false,
      }),
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

info

The NgxFlagrOptions also accepts a lambda to indicate which FeatureFlagService should be resolved:

main.ts

const options: NgxFlagrOptions = {
  featureFlagService: () => environment.useCustomService
    ? CustomFeatureFlagService
    : RegularFeatureFlagService,
};

Providing a custom FeatureFlagService

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

If you would like to write your own way of evaluating the feature flags, you can write your own implementation of FeatureFlagService:

custom-feature-flag.service.ts

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

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

@Injectable({ providedIn: 'root' })
export class CustomFeatureFlagService implements FeatureFlagService {
  // ...
}

The FeatureFlagService interface requires us to implement a single isEnabled method for the feature flags evaluation.

This method takes a feature flag and returns a value indicating whether or not this feature flag is enabled.

A FeatureFlag is defined as:

type FeatureFlag = string | string[];

From here, you can provide it in the configuration so that ngx-flagr will use your own implementation:

Using providers

In the main.ts file, you can call provideNgxFlagr in the providers array and pass in which service should be used for the feature flags evaluation:

main.ts

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

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

import { AppComponent } from './app/app.component';
import { CustomFeatureFlagService } from './app/custom-feature-flag.service';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgxFlagr({ featureFlagService: CustomFeatureFlagService }),
  ],
});

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 { CustomFeatureFlagService } from './custom-feature-flag.service';

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

Extending the library

@ngx-flagr/core provides the basic functionalities for evaluating and managing feature flags in your application. However, you may want to extend the library to integrate with your specific feature flag provider or add additional functionality.

To do this, you can install and use one of the available integration packages or add-on packages provided by the ngx-flagr library. Check out the documentation of the relevant packages for more information on how to use them.