ngx-feature-toggle

NGX Feature Toggle

Your module to handle with feature toggles in Angular applications easier.

Why Feature toggle?

This is a common concept, but why use this directive instead solve it via server-side rendering?

The idea of this directive is make this process transparent and easier. So the main point is integrate this directive with other tooling process, such as:

• Server-side rendering;
• Progressive rendering;
• Any other that yoy like :)

You can integrate with WebSockets or handling this in a EventSourcing architecture. It's totally transparent for you and you can integrate easier in your application.

Demo

Try out the demo!

• Install
• Setup
• Usage

Install

You can get it on NPM installing ngx-feature-toggle module as a project dependency.

npm install ngx-feature-toggle --save

Setup

You'll need to add FeatureToggleModule to your application module. So that, the featureToggle directive will be accessible in your application.

@NgModule({
  declarations: [
    YourAppComponent
  ],
  imports: [
    FeatureToggleModule,
    ...
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})

export class YourAppComponent {}

Now you just need to add a configuration in your application root component. Your feature toggle configuration can be added using different approaches, such as:

• RXJS subscribe information;
• HTTP Request;
• CQRS event data;
• File information;
• etc;

After that, you can use the featureToggle directive in your templates, passing the string based on the feature toggle configuration data.

import { Component } from '@angular/core';
import { FeatureToggleServiceProvider } from 'ngx-feature-toggle';

@Component({
  selector: 'component-docs',
  template: `
<h3>Live code</h3>

<p>Feature Toggle Configuration Data: </p>
<p><b>{{ featureToggleData | json }}</b></p>

<feature-toggle [featureName]="'enableSecondText'">
  <p>condition is true and "featureToggle" is enabled.</p>
  <feature-toggle [featureName]="'enableFirstText'">
    <p>condition is false and "featureToggle" is disabled. In that case this content should not be rendered.</p>
  </feature-toggle>
  <feature-toggle [featureName]="'enableFirstText'" showWhenDisabled >
    <p>condition is false and "featureToggle" is disabled and it has "showWhenDisabled" attribute.</p>
    <p>In that case this content should be rendered.</p>
  </feature-toggle>
</feature-toggle>
`
})

export class ComponentDocsComponent {
  public featureToggleData: any = {
    enableFirstText: false,
    enableSecondText: true
  };
}

Development

Run demo locally:

1. build lib npm run build (npm run build-watch to run build in watch mode)
2. link lib npm run link
3. run demo npm start

Publish

1. ./node_modules/.bin/ngm -p src version patch
2. ./node_modules/.bin/ngm -p src publish

Update demo (gh-pages)

1. npm run demo-gh-pages

Author

Wilson Mendes (willmendesneto)

• https://plus.google.com/+WilsonMendes
• https://twitter.com/willmendesneto
• http://github.com/willmendesneto

Changelog

[3.0.0][] - 2021-07-23

Added

Breaking Change

• Adding mechanism to prevents calling forRoot() more than once if module is loaded asynchronously in a submodule. This is required in order to avoid issues in consumers. To avoid that, consumers should load the module once on the main module instead - if loading submodules async.