Enterprise-grade feature flag guard and directive for Angular applications.
npm install ngx-feature-flag-guardAngular-first feature flag execution layer. Standardizes flag resolution across environments with a clear priority model.
- Priority-based Resolution: Remote > Local Storage > Static Defaults.
- Angular Integration: Structural directives, route guards, and reactive services.
- Enterprise Safe: Fail-safe defaults (OFF) and environment-aware overrides.
- Framework Agnostic Core: Core logic is decoupled from Angular.
| Angular Version | Support |
| :--- | :--- |
| v16+ | ✅ Fully Supported |
| v14 - v15 | ⚠️ Should work (uses standalone & inject) but untested |
| < v14 | ❌ Not Supported |
``bash`
npm install ngx-feature-flag-guard
`ts`
export const FEATURE_FLAGS = {
experimentalFeature: false,
newDashboard: false,
} as const;
#### Standalone Application
`ts
import { provideFeatureFlags } from 'ngx-feature-flag-guard';
bootstrapApplication(AppComponent, {
providers: [
provideFeatureFlags({
defaults: FEATURE_FLAGS,
enableLocalStorage: !environment.production
})
]
});
`
#### NgModule Application
`ts
import { FeatureFlagModule } from 'ngx-feature-flag-guard';
@NgModule({
imports: [
FeatureFlagModule.forRoot({
defaults: FEATURE_FLAGS,
enableLocalStorage: !environment.production
})
]
})
export class AppModule { }
`
`html`
New Experimental UI
`ts`
const routes: Routes = [
{
path: 'new-dashboard',
component: NewDashboardComponent,
canActivate: [featureFlagGuard],
data: {
feature: 'newDashboard',
redirectTo: '/old-dashboard'
}
}
];
`ts`
constructor(private featureFlagService: FeatureFlagService) {
if (this.featureFlagService.isEnabled('experimentalFeature')) {
// ...
}
}
Enable local overrides in non-production environments to allow manual testing:
`ts``
localStorage.setItem('ff.experimentalFeature', 'true');
MIT