@angularforge/command-palette

Examples

Common command palette patterns, copy-paste ready.

Router Navigation 

import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { CommandPaletteService } from '@angularforge/command-palette';

// In any component / service:
const palette = inject(CommandPaletteService);
const router = inject(Router);

palette.register([
  { id: 'go-home',     label: 'Home',     action: () => router.navigate(['/'])       },
  { id: 'go-users',    label: 'Users',    action: () => router.navigate(['/users'])  },
  { id: 'go-settings', label: 'Settings', action: () => router.navigate(['/settings']) },
]);

Open Programmatically 

const palette = inject(CommandPaletteService);

// From a button, shortcut, or any event:
palette.open();
palette.close();
palette.toggle();

Async Action 

palette.register([
  {
    id: 'export-data',
    label: 'Export data',
    description: 'Download a CSV of all records',
    category: 'Actions',
    action: async () => {
      const blob = await this.dataService.exportCsv();
      downloadBlob(blob, 'export.csv');
    },
  },
]);

Reactive Labels (i18n)

Use effect() to re-register commands with translated labels whenever the language changes: 

import { effect, inject } from '@angular/core';
import { CommandPaletteService } from '@angularforge/command-palette';
import { TranslateService } from './translate.service';

@Injectable({ providedIn: 'root' })
export class AppCommandsService {
  private readonly palette = inject(CommandPaletteService);
  private readonly translate = inject(TranslateService);

  constructor() {
    effect(() => {
      const t = this.translate.currentLang(); // signal
      this.palette.register([
        { id: 'nav-home', label: t('home'), category: t('navigation'),
          action: () => void router.navigate(['/']) },
      ]);
    });
  }
}

Scoped Commands (Feature Module)

Register commands when a feature component loads and clean them up on destroy: 

@Component({ /* ... */ })
export class UserListComponent implements OnInit {
  private readonly palette = inject(CommandPaletteService);
  private readonly destroyRef = inject(DestroyRef);

  private readonly USER_CMD_IDS = ['users-create', 'users-export'];

  ngOnInit(): void {
    this.palette.register([
      { id: 'users-create', label: 'Create User', category: 'Users',
        action: () => this.openCreateModal() },
      { id: 'users-export', label: 'Export Users', category: 'Users',
        action: async () => this.exportCsv() },
    ]);

    this.destroyRef.onDestroy(() => this.palette.unregister(this.USER_CMD_IDS));
  }
}