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 you 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
• Install
• Setup
• Development
• Contribute

Demo

Take a look on the docs or try out our demo on Stackblitz!

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 components 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 components in your templates, passing the string based on the feature toggle configuration data.

• feature-toggle-provider: Handle with feature toggle configuration in your application. It adds the default values of your enabled/disabled features;
• feature-toggle: Handle with feature toggle check. So that, the component will be rendered/removed based on the feature toggle provider configuration;

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

@Component({
  selector: 'component-docs',
  template: `
<feature-toggle-provider [features]="featureToggleData">
    <feature-toggle [featureName]="'enableSecondText'">
      <p>condition is true and "featureToggle" is enabled.</p>
    </feature-toggle>
    <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 <b>and it has "showWhenDisabled" attribute.</b> In that case this content should be rendered.</p>
    </feature-toggle>
</feature-toggle-provider>
`
})

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

Development

Run demo locally

1. This project uses Angular CLI as base. That means you just need to run npm start and access the link http://localhost:4200 in your browser

Run tests

1. Run npm test for run tests. In case you want to test using watch, please use npm run tdd

Publish

1. npm version <major | minor | patch> -m "v%s"
2. npm publish dist

Contribute

For contributions, please follow the instructions in CONTRIBUTING.md file.

Author

Wilson Mendes (willmendesneto)

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