A powerful development toolbar for Angular applications that helps developers to interact with the application in a more efficient way.
| 🚥 | Toggle feature flags without backend changes |
| 🌍 | Switch languages instantly |
| 🧩 | Test product features and subscription tiers |
| 🎨 | Switch themes on the fly |
| 👤 | Change user sessions effortlessly |
| 🔄 | Mock network requests in real-time |
| 🔐 | Test permission-based UI without backend changes |
No more context switching or backend dependencies - everything you need is right in your browser!
- Feature Flags
- Language Switcher
- Permissions Tool
- App Features Tool
- Presets Tool
- Network Mocker (Request Interceptor)
- Themes
Coming Soon - User Session
Coming Soon
- Create custom tools
- Add your own functionality
- Hidden by default in production
- Zero production impact
- Secure implementation
- Settings persist across reloads
- Import/Export configuration
1. Installation
npm install ngx-dev-toolbar --save-dev2. Import Component
import { DevToolbarComponent } from 'ngx-dev-toolbar';
@Component({
imports: [DevToolbarComponent],
template: ` <ndt-toolbar> </ndt-toolbar>`,
})
export class AppComponent {}The tools come with a default implementation, but you can create your own tools and add them to the toolbar.
They have a service that you can use to interact with them.
In order to use the feature flags tool, you need to import the DevToolbarFeatureFlagService and inject it in your component.
Then you just need to call the setAvailableOptions method with the available feature flags that can come from your backend or a third party service.
import { DevToolbarFeatureFlagService } from 'ngx-dev-toolbar';
import { inject } from '@angular/core';
@Component({
// ... component decorator
})
export class AppComponent {
private featureFlagsService = inject(DevToolbarFeatureFlagService);
constructor() {
// Set available feature flags
this.featureFlagsService.setAvailableOptions([
{ id: 'darkMode', name: 'Dark Mode' },
{ id: 'betaFeatures', name: 'Beta Features' },
{ id: 'experimentalUI', name: 'Experimental UI' },
]);
}
}Once it is added you should see them in the Feature Flags tool in the Angular Dev Toolbar with a visual filter indicator for easier navigation.
Note: Screenshots are being updated to reflect the latest UI improvements including new lock, filter, and bolt icons.
@Component({
// ... component decorator
})
export class FeatureComponent {
private featureFlagsService = inject(DevToolbarFeatureFlagService);
ngOnInit() {
this.featureFlagsService.getForcedValues().subscribe((forcedFlags) => {
const isDarkMode = forcedFlags.some((flag) => flag.id === 'darkMode');
// Apply dark mode logic
});
}
}- 🔐 Lock icon for permissions tool
- 🔍 Filter icons for better visual clarity
- ⚡ Bolt icon for custom tools
- 📝 Improved text wrapping in tool descriptions
import { DevToolbarPermissionsService } from 'ngx-dev-toolbar';
import { inject } from '@angular/core';
@Component({
// ... component decorator
})
export class AppComponent {
private permissionsService = inject(DevToolbarPermissionsService);
constructor() {
// Set available permissions
this.permissionsService.setAvailableOptions([
{ id: 'can-edit', name: 'Can Edit Posts', description: 'Allows editing posts', isGranted: false, isForced: false },
{ id: 'can-delete', name: 'Can Delete Posts', description: 'Allows deleting posts', isGranted: false, isForced: false },
{ id: 'can-manage-users', name: 'Can Manage Users', description: 'Allows user management', isGranted: false, isForced: false },
{ id: 'is-admin', name: 'Admin Access', description: 'Full admin access', isGranted: false, isForced: false },
]);
}
}@Component({
// ... component decorator
})
export class ProtectedComponent {
private permissionsService = inject(DevToolbarPermissionsService);
ngOnInit() {
this.permissionsService.getForcedValues().subscribe((forcedPermissions) => {
const canEdit = forcedPermissions.some(p => p.id === 'can-edit' && p.isGranted);
const isAdmin = forcedPermissions.some(p => p.id === 'is-admin' && p.isGranted);
// Apply permission-based logic
});
}
}import { DevToolbarLanguageService } from 'ngx-dev-toolbar';
import { inject } from '@angular/core';
@Component({
// ... component decorator
})
export class AppComponent {
private languageService = inject(DevToolbarLanguageService);
constructor() {
// Set available languages
this.languageService.setAvailableOptions([
{ code: 'en', name: 'English' },
{ code: 'es', name: 'Spanish' },
{ code: 'fr', name: 'French' },
]);
}
}@Component({
// ... component decorator
})
export class TranslatedComponent {
private languageService = inject(DevToolbarLanguageService);
ngOnInit() {
this.languageService.getForcedValues().subscribe(([selectedLang]) => {
// Update component's language
this.currentLanguage = selectedLang.code;
this.loadTranslations();
});
}
}The App Features tool allows you to test product-level feature availability like license tiers, deployment configurations, and environment flags without changing backend settings. Perfect for testing subscription tiers, premium features, and environment-specific functionality.
import { DevToolbarAppFeaturesService, DevToolbarAppFeature } from 'ngx-dev-toolbar';
import { inject } from '@angular/core';
@Component({
// ... component decorator
})
export class AppComponent {
private appFeaturesService = inject(DevToolbarAppFeaturesService);
constructor() {
// Set available product features
const features: DevToolbarAppFeature[] = [
{
id: 'advanced-analytics',
name: 'Advanced Analytics Dashboard',
description: 'Premium reporting and data visualization',
isEnabled: false, // Not available in current tier
isForced: false
},
{
id: 'multi-user-support',
name: 'Multi-User Collaboration',
description: 'Team features and user management',
isEnabled: true, // Available in current tier
isForced: false
},
{
id: 'white-label-branding',
name: 'White Label Branding',
description: 'Custom branding with your logo and colors',
isEnabled: false, // Enterprise feature
isForced: false
}
];
this.appFeaturesService.setAvailableOptions(features);
}
}@Component({
// ... component decorator
})
export class PremiumFeatureComponent {
private appFeaturesService = inject(DevToolbarAppFeaturesService);
ngOnInit() {
this.appFeaturesService.getForcedValues().subscribe((forcedFeatures) => {
// Apply forced feature states to your application
forcedFeatures.forEach(feature => {
if (feature.id === 'advanced-analytics' && feature.isEnabled) {
this.enableAnalyticsDashboard();
}
});
});
}
}- SaaS Subscription Tiers: Test Basic, Professional, and Enterprise tiers without changing subscriptions
- Feature Gating: Test premium feature access and upgrade flows
- Environment Configuration: Test features specific to dev, staging, or production
- License Management: Test on-premise vs cloud feature availability
- A/B Testing: Test different feature combinations
- Beta Rollouts: Enable/disable beta features for testing
We welcome contributions! Please see our contributing guidelines for details.
This project is licensed under the MIT License - see the LICENSE file for details.
