Angular Dev Toolbar

A powerful development toolbar for Angular applications that helps developers to interact with the application in a more efficient way.

✨ Why ngx-dev-toolbar?

🚥	Toggle feature flags without backend changes
🌍	Switch languages instantly
🎨	Switch themes on the fly
👤	Change user sessions effortlessly
🔄	Mock network requests in real-time

No more context switching or backend dependencies - everything you need is right in your browser!

🎯 Features

📦 Available Tools

• Feature Flags
• Language Switcher
• Themes Coming Soon
• User Session Coming Soon
• Network Requests Mocker Coming Soon

🛠️ Extensible

• Create custom tools
• Add your own functionality

🔒 Production Ready

• Hidden by default in production
• Zero production impact
• Secure implementation

💾 Persistent State

• Settings persist across reloads
• Import/Export configuration Coming Soon

📱 Quick Start

1. Installation

npm install ngx-dev-toolbar --save-dev

2. Import Component

import { DevToolbarComponent } from 'ngx-dev-toolbar';

@Component({
  imports: [DevToolbarComponent],
  template: ` <ndt-toolbar> </ndt-toolbar>`,
})
export class AppComponent {}

Available Tools

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.

Feature Flags

Configuration

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.

Usage

@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
    });
  }
}

Dev Toolbar Interface

[Screenshot placeholder showing the feature flags interface in the dev toolbar]

Language Switcher

Configuration

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' },
    ]);
  }
}

Usage

@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();
    });
  }
}

Contributing

We welcome contributions! Please see our contributing guidelines for details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

📚 Documentation

🐛 Issue Tracker

💬 Discussions

🌟 Stay Connected

---

Built with ❤️ using Nx