ng-featureflags v0.0.6

ng-featureflags

Library to implement feature flags in your project.

Steps to implement

Install library using command

$ npm install @impesa/ng-featureflags --save

Import in app.module.ts

import { NgFeatureflagsModule} from '@impesa/ng-featureflags'; Also Add it to imports imports: [NgFeatureflagsModule],

IMPORTANT Identify the first Component to load

In this project home component loads initially { path: '', redirectTo: 'home', pathMatch: 'full' },

Pass featureflags list to feature-toggle-host in home.component

• HTML

• pass featureflags as below and put ngIf check so that featureflagswill be passed after initialized (screen will not load till data loaded)

  '<div *ngIf='featureflags'> <feature-toggle-host featureflags='featureflags'> ... YOUR HTML CONTENT </ feature-toggle-host> </ div>'

• TS // declare featureflags variable featureflags: any; // In Constructor or OnInit write following code // to get featureflag values // if not present in local storage if (!localStorage.getItem('featureflags')) { //call API } else { // Get from local storage this.featureflags = JSON.parse(CryptoJS.AES.decrypt(localStorage.getItem('featureflags'), 'asepmi').toString(CryptoJS.enc.Utf8)); }

Using featureToggle Directive

Once you pass the featureflags to feature-toggle-host you can use featureToggle inside that as follows

<div  *featureToggle="'reports'">REPORTS PAGE HTML</div>

Value passed here is compared with your feature list and content is rendered.

• This directive can be used along with any html element ex. button, form, input

• It should be used with navigation control to show Allowed Routes only

Using FeatureRouteGuardService to block url segment for disabled featureflags

import { FeatureRouteGuardService } from '@impesa/ng-featureflags' Inside the canActivate method add following code

constructor(private  router: Router, private  feature: FeatureRouteGuardService) { }
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot)
{

const  urlseg  =  state.url.slice(state.url.lastIndexOf('/') +  1, state.url.length);
if (auth.isEnabled() && this.feature.isAuthenticated(urlseg)) {
return  true;
}
// navigate to home page
this.router.navigate(['/']);
return  false;
}