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.