Getting Started

What is ngx-dev-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. Import the Component

Add the toolbar component to your app:

import { Component } from '@angular/core';
import { DevToolbarComponent } from 'ngx-dev-toolbar';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DevToolbarComponent],
  template: `
    <ndt-toolbar />
    <router-outlet />
  `
})
export class AppComponent {}

2. 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
• Language Switcher: Test your app in different languages without changing system settings
• 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

Next Steps

Explore the individual tool documentation to learn how to integrate and use each feature:

• Feature Flags Tool - Configure and override feature flags
• Language Switcher Tool - Set up multi-language testing
• Permissions Tool - Test authorization scenarios
• App Features Tool - Manage feature toggles
• Presets Tool - Create reusable configurations

Resources

• GitHub Repository
• NPM Package