Permissions Tool

Overview

The Permissions Tool allows developers to override user permissions at runtime for testing different access control scenarios. This enables testing permission-based UI and functionality without changing user roles or backend configuration.

Use Cases

• Testing Access Control: Verify that UI elements and features are properly hidden/shown based on permissions
• Role Simulation: Test application behavior as different user roles (admin, editor, viewer) without switching accounts
• Security Testing: Ensure restricted features are properly protected when permissions are denied

Quick Start

app.component.ts

import { Component, inject, signal } from '@angular/core';
import { ToolbarPermissionsService } from 'ngx-dev-toolbar';

@Component({
  selector: 'app-root',
  template: `
    @if (canEdit()) {
      <button>Edit</button>
    }
    @if (canDelete()) {
      <button>Delete</button>
    }
  `
})
export class AppComponent {
  private permissionsService = inject(ToolbarPermissionsService);

  canEdit = signal(false);
  canDelete = signal(false);

  ngOnInit() {
    // Define available permissions
    this.permissionsService.setAvailableOptions([
      {
        id: 'can-edit',
        name: 'Can Edit',
        description: 'Permission to edit records',
        isGranted: false,
        isForced: false
      },
      {
        id: 'can-delete',
        name: 'Can Delete',
        description: 'Permission to delete records',
        isGranted: false,
        isForced: false
      }
    ]);

    // Subscribe to forced permission values
    this.permissionsService.getForcedValues().subscribe(permissions => {
      const edit = permissions.find(p => p.id === 'can-edit');
      const del = permissions.find(p => p.id === 'can-delete');

      this.canEdit.set(edit?.isGranted || false);
      this.canDelete.set(del?.isGranted || false);
    });
  }
}

Apply to Source

You can persist forced permission values back to your actual data source. When configured, each permission item shows an “apply” button.

Call setApplyToSource() on the service — right alongside setAvailableOptions():

permissions.service.ts

import { Injectable, inject } from '@angular/core';
import { ToolbarPermissionsService } from 'ngx-dev-toolbar';

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

  constructor() {
    this.toolbarService.setAvailableOptions([...]); // [!code highlight]

    this.toolbarService.setApplyToSource(async (permissionId, value) => { // [!code highlight]
      await fetch(`/api/permissions/${permissionId}`, { // [!code highlight]
        method: 'PUT', // [!code highlight]
        body: JSON.stringify({ granted: value }), // [!code highlight]
      }); // [!code highlight]
    }); // [!code highlight]
  }
}

The toolbar automatically manages loading, success, and error states for each item.

Related Tools

• Feature Flags Tool — Test feature toggles
• App Features Tool — Test product-level features
• Presets Tool — Save permission configurations