Ngx-dev-toolbar NPM

Angular Dev Toolbar

📚 Documentation & Demo

✨ Why ngx-dev-toolbar?

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

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

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

@Component({
  imports: [DevToolbarComponent],
  template: ` <ndt-dev-toolbar> </ndt-dev-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.

Feature Flags Tool

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