Getting Started

What is Angular Toolbar?

Angular Toolbar (ngx-dev-toolbar) is a powerful Angular 19+ library that provides an interactive development toolbar for testing and debugging feature flags, language switching, permissions, app features, and more — all without modifying your backend or redeploying your application.

Installation

Install the package via npm:

npm install ngx-dev-toolbar

Quick Setup

1. Add to app.config.ts

Add the toolbar to your application alongside your other providers:

app.config.ts

import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideToolbar } from 'ngx-dev-toolbar'; // [!code highlight]

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(appRoutes),
    provideToolbar({ // [!code highlight]
      enabled: isDevMode(), // [!code highlight]
    }), // [!code highlight]
  ],
};

That’s it! No template changes needed. The toolbar automatically attaches to the DOM.

2. Configure Tools (Optional)

app.config.ts

provideToolbar({
  enabled: isDevMode(),
  showFeatureFlagsTool: true,
  showPermissionsTool: true,
  showI18nTool: true,
  showAppFeaturesTool: true,
  showPresetsTool: true,
})

3. Apply to Source (Optional)

You can persist toolbar overrides back to your actual data source by calling setApplyToSource() on the service:

feature-flags.service.ts

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

@Injectable({ providedIn: 'root' })
export class FeatureFlagService {
  private toolbarService = inject(ToolbarFeatureFlagService);

  constructor() {
    this.toolbarService.setAvailableOptions([...]);
    this.toolbarService.setApplyToSource(async (flagId, value) => { // [!code highlight]
      await this.api.updateFlag(flagId, value); // [!code highlight]
    }); // [!code highlight]
  }
}

When configured, each tool item shows an “apply” button to push changes to the source.

4. Start Using the Tools

Once installed, press Ctrl+Shift+D to toggle the toolbar. From there, you can access all available tools and start configuring your development environment.

Key Features

• Feature Flags: Override feature flag states at runtime for testing different configurations
• Permissions: Force grant or deny permissions to test authorization logic
• App Features: Toggle application features on and off for development and testing
• Presets: Save and restore complete toolbar configurations for different testing scenarios

Available Tools

Explore each tool to learn how to integrate and use it:

• Feature Flags — Override feature flags to test different application states
• i18n — Simulate complete i18n environments (locale, timezone, currency, RTL)
• Permissions — Force permissions to test authorization scenarios
• App Features — Toggle application features for testing
• Presets — Save and restore complete toolbar configurations

Resources

• GitHub Repository
• NPM Package