ngx-cmdk

A Cmd/Ctrl+K style command palette for Angular. Any component, directive, guard, or service anywhere in your app can register commands via dependency injection — no single root location required.

Live docs & demo →

Install

npm install ngx-cmdk

Quick start

// app.config.ts
providers: [provideCmdk()]

<!-- app.html, mounted once -->
<ngx-cmdk-palette />

// anywhere in your app
constructor() {
  const registry = inject(CommandRegistryService);
  registry.register({
    label: 'Go to Settings',
    shortcut: 'mod+s',
    execute: () => { this.router.navigate(['/settings']); },
  });
}

Search providers are a second registration surface — attach an async data source and typing fans the query out to every registered provider, merging the results into the palette:

constructor() {
  const search = inject(SearchRegistryService);
  search.register({
    key: 'fruits',
    label: 'fruits',
    search: async (query) => fetchResults(query),
  });
}

See the live docs for the full guide and API reference.

Development

This is an Angular CLI workspace with two projects: projects/ngx-cmdk (the library) and projects/demo (a demo app that also serves as the docs site).

npx ng build ngx-cmdk   # build the library first — the demo app needs it
npx ng serve demo       # then serve the demo/docs app locally
npx ng test ngx-cmdk    # run the library's unit tests

Publishing a release

1. Bump version in projects/ngx-cmdk/package.json.
2. Cut a GitHub Release at that version — .github/workflows/publish-npm.yml builds and publishes to npm automatically via npm's Trusted Publisher (OIDC), no token required.

License

MIT