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:
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
You can get it on NPM installing ngx-feature-toggle module as a project dependency.
$ npm install --save ngx-feature-toggle
You'll need to add FeatureToggleModule to your application module. So that, the featureToggle directive will be accessible in your application.
import { FeatureToggleModule, FeatureToggleServiceProvider } from 'ngx-feature-toggle';
...
@NgModule({
...
declarations: [
YourAppComponent
],
imports: [ FeatureToggleModule ],
providers: [FeatureToggleServiceProvider],
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:
After that, you can use the featureToggle directive in your templates, passing the string based on the feature toggle configuration data.
Inside your main component, add the information into the FeatureToggleServiceProvider and add this information by key information provided for your service.
<div *featureToggle="'enableSecondText'">
condition is true and `featureToggle` is enabled.
<div *featureToggle="'enableFirstText'">
condition is false and `featureToggle` is disabled. In that case this content should not be rendered.
</div>
</div>
import { FeatureToggleServiceProvider } from 'ngx-feature-toggle';
class AnotherExampleComponent {
public constructor(
private featureToggleServiceProvider:FeatureToggleServiceProvider
) {
featureToggleServiceProvider.setConfigurationObject({
enableFirstText: false,
enableSecondText: true
});
}
}
* for more details, please see demo folder in Github repository
Feature Toggle Configuration Data:
{{ featureToggleData | json }}
condition is true and `featureToggle` is enabled.
condition is false and `featureToggle` is disabled. In that case this content should not be rendered.
This service exposes a few different methods with which you can interact with featureToggle directive.
Adds the feature toggle configuration in your application. This information will be private and checked via `featureToggleServiceProvider.isOn(key)` and `featureToggleServiceProvide`.isOff(key)` methods.
Checks if the featureToggle configuration has the string key value with true value.
Checks if the featureToggle configuration does not have the string key value with true value.