ng-cmdk

Fast, composable, unstyled command menu for Angular — a port of cmdk.

▶️ Try it on StackBlitz

Origin

This library is an Angular port of cmdk by Paco Coursey.

Built with reangular

This library was generated using the reangular skill, an automated React-to-Angular conversion harness for coding agents.

Install

npm install ng-cmdk @angular/cdk

@angular/cdk is a peer dependency (used only by CommandDialog for the overlay, focus trap and Esc/scroll handling).

Usage

import { Component } from '@angular/core';
import { NG_CMDK } from 'ng-cmdk';

@Component({
  selector: 'app-palette',
  imports: [NG_CMDK],
  template: `
    <ng-command label="Command menu" (valueChange)="onChange($event)">
      <input ng-command-input placeholder="Search…" />
      <ng-command-list>
        <ng-command-empty>No results found.</ng-command-empty>
        <ng-command-group heading="Letters">
          <ng-command-item (selected)="run($event)">Apple</ng-command-item>
          <ng-command-item [keywords]="['fruit']" (selected)="run($event)">Banana</ng-command-item>
        </ng-command-group>
        <ng-command-separator />
        <ng-command-item [disabled]="true">Disabled</ng-command-item>
      </ng-command-list>
    </ng-command>
  `,
})
export class Palette {
  run(value: string) { /* ... */ }
  onChange(value: string) { /* ... */ }
}

Import individual symbols, or spread NG_CMDK into imports for the whole set.

Components & selectors

| React | Angular | Selector | |---|---|---| | Command / CommandRoot | CommandRoot | ng-command | | Command.Input / CommandInput | CommandInput | input[ng-command-input] | | Command.List / CommandList | CommandList | ng-command-list | | Command.Item / CommandItem | CommandItem | ng-command-item | | Command.Group / CommandGroup | CommandGroup | ng-command-group | | Command.Separator / CommandSeparator | CommandSeparator | ng-command-separator | | Command.Empty / CommandEmpty | CommandEmpty | ng-command-empty | | Command.Loading / CommandLoading | CommandLoading | ng-command-loading | | Command.Dialog / CommandDialog | CommandDialog | ng-command-dialog |

| React | Angular | |---|---| | useCommandState(selector) | injectCommandState(selector) → Signal<T> | | defaultFilter | defaultFilter | | commandScore | commandScore |

API notes

• React callback props become Angular outputs: onSelect → (selected), onValueChange → (valueChange), onOpenChange → (openChange).
• Boolean props (loop, disablePointerSelection, vimBindings, disabled, forceMount, alwaysRender, open) accept HTML-attribute style via booleanAttribute.
• It is unstyled. Style via the [cmdk-*] attribute selectors, exactly as in cmdk.

Demo

A demo app exercising every component, input, output and state lives in projects/demo:

npm install
npx ng serve demo

License

MIT — same as the original cmdk.