Your module to handle with feature toggles in Angular applications easier.
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.
Try out the demo!
You can get it on NPM installing ngx-feature-toggle
module as a project dependency.
npm install ngx-feature-toggle --save
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 [featureToggleService]="featureToggleData">
<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>
</feature-toggle-provider>
`
})
export class ComponentDocsComponent {
public featureToggleData: any = {
enableFirstText: false,
enableSecondText: true
};
}
Run demo locally:
- build lib
npm run demo-server
(npm run demo-dev-server
to rundem
/src` content in watch mode)
npm run publish
- npm run demo-gh-pages
- npm run bundle-report
- npm run demo-build-report
- npm run analyze -- demo/dist/.js
For contributions, please follow the instructions in CONTRIBUTING.md file.
Wilson Mendes (willmendesneto)