Command Palette overview
<tng-command-palette> provides a modal search surface for app commands, device pickers, and quick navigation. The parent owns the query and result data while the component owns the popup, input, keyboard navigation, and selection events.
Imports
Import the wrapper and bind it to signal state for open, query, and results.
Wrapper imports
ts
import { TngCommandPaletteComponent } from '@tailng-ui/components';
Minimal usage
html
<tng-command-palette
[open]="searchOpen()"
[query]="searchQuery()"
[options]="searchResults()"
placeholder="Search devices..."
(openChange)="searchOpen.set($event)"
(queryChange)="searchQuery.set($event)"
(optionSelect)="onDeviceSelect($event)"
/>
Live preview
Compare plain CSS and Tailwind implementations. Both demos are fully copy-pastable from the code tabs.
Command palette (Plain CSS)
Command palette (Tailwind CSS)
Composition model
- Dialog behavior handles Escape, backdrop close, focus trap, and restore focus.
- The input emits every query change; filtering, loading, and fetching stay in the parent.
- Listbox navigation keeps focus in the input while active option state moves in the list.
- Templates let you replace the prefix, suffix, option row, loading, empty, and footer content.