Getting Started

What is Angular Toolbar?

Angular Toolbar (ngx-dev-toolbar) is a powerful Angular 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

Compatibility

The library is AOT-compiled against every supported Angular major in CI. The following versions are verified for each release:

Angular	Status
19	✅ Verified
20	✅ Verified
21	✅ Verified
22	✅ Verified

The published package declares an open peer range (@angular/* >=19.0.0); the matrix above is what backs that claim.

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

Press Ctrl+Shift+D in your running app to toggle the toolbar. From there, each tool becomes a panel you can configure without leaving the page.

Next steps

Pick a tool to integrate deeper into your application:

• Feature Flags — override flags + organize with group
• Permissions — force-grant or deny for authorization testing
• App Features — simulate tiers and product configurations
• i18n — locale, timezone, currency, RTL in one panel
• Presets — save + restore full toolbar states
• Create a custom tool — extend the toolbar with your own