Command

Fast, composable, command menu for Angular.

SuggestionsSettings

Installation

npx nx g @spartan-ng/cli:ui command

Usage

import { BrnCommandImports } from '@spartan-ng/brain/command';
import { HlmCommandImports } from '@spartan-ng/helm/command';
<hlm-command>
  <hlm-command-search>
    <ng-icon hlm name="lucideSearch" />

    <input
      type="text"
      hlm-command-search-input
      placeholder="Type a command or search..."
    />
  </hlm-command-search>

  <hlm-command-list>
    <hlm-command-group>
      <hlm-command-group-label>Suggestions</hlm-command-group-label>

      <button hlm-command-item value="Calendar">
        <ng-icon hlm name="lucideCalendar" hlmCommandIcon />
        Calendar
      </button>
    </hlm-command-group>

    <hlm-command-separator />

    <hlm-command-group>
      <hlm-command-group-label>Settings</hlm-command-group-label>

      <button hlm-command-item value="Profile">
        <ng-icon hlm name="lucideUser" hlmCommandIcon />
        Profile
        <hlm-command-shortcut>P</hlm-command-shortcut>
      </button>
    </hlm-command-group>
  </hlm-command-list>

  <!-- Empty state -->
  <div *brnCommandEmpty hlmCommandEmpty>No results found.</div>
</hlm-command>

Brain API

BrnCommandEmpty

Selector: [brnCommandEmpty]

BrnCommandGroup

Selector: [brnCommandGroup]

Inputs

PropTypeDefaultDescription
id string `brn-command-group-${BrnCommandGroup._id++}` The id of the command list

BrnCommandItem

Selector: button[brnCommandItem]

Inputs

PropTypeDefaultDescription
id unknown `brn-command-item-${BrnCommandItem._id++}` A unique id for the item
value* (required) string - The value this item represents.
disabled boolean false Whether the item is disabled.

Outputs

PropTypeDefaultDescription
selected void - Emits when the item is selected.

BrnCommandList

Selector: [brnCommandList]

Inputs

PropTypeDefaultDescription
id string `brn-command-list-${BrnCommandList._id++}` The id of the command list

BrnCommandSearchInput

Selector: input[brnCommandSearchInput]

Inputs

PropTypeDefaultDescription
value string - The initial value of the search input

BrnCommand

Selector: [brnCommand]

Inputs

PropTypeDefaultDescription
id string `brn-command-${BrnCommand._id++}` The id of the command
filter CommandFilter this._defaultFilter A custom filter function to use when searching.

Outputs

PropTypeDefaultDescription
valueChange string - when the selection has changed

Helm API

HlmCommandDialogCloseButton

Selector: [hlmCommandDialogCloseBtn]

Inputs

PropTypeDefaultDescription
class ClassValue --

HlmCommandDialog

Selector: [hlmCommandDialog]

Inputs

PropTypeDefaultDescription
class ClassValue --

HlmCommandEmpty

Selector: [hlmCommandEmpty]

Inputs

PropTypeDefaultDescription
class ClassValue --

HlmCommandGroupLabel

Selector: hlm-command-group-label

Inputs

PropTypeDefaultDescription
class string - * The user defined class

HlmCommandGroup

Selector: hlm-command-group

Inputs

PropTypeDefaultDescription
class string - * The user defined class

HlmCommandIcon

Selector: [hlmCommandIcon]

Inputs

PropTypeDefaultDescription
class ClassValue --

HlmCommandItem

Selector: button[hlm-command-item]

Inputs

PropTypeDefaultDescription
value string - The value this item represents.
disabled boolean false Whether the item is disabled.
class string - * The user defined class

Outputs

PropTypeDefaultDescription
selected void - Emits when the item is selected.

HlmCommandList

Selector: hlm-command-list

Inputs

PropTypeDefaultDescription
class string - The user defined class

HlmCommandSearchInput

Selector: input[hlm-command-search-input]

Inputs

PropTypeDefaultDescription
class ClassValue - * The user defined class

HlmCommandSearch

Selector: hlm-command-search

Inputs

PropTypeDefaultDescription
class ClassValue - * The user defined class

HlmCommandSeparator

Selector: hlm-command-separator

Inputs

PropTypeDefaultDescription
class string - * The user defined class

HlmCommandShortcut

Selector: hlm-command-shortcut

Inputs

PropTypeDefaultDescription
class ClassValue --

HlmCommand

Selector: hlm-command

Inputs

PropTypeDefaultDescription
class ClassValue - * The user defined class

Examples

Dialog

Press ⌘ + Shift + P

Last command: none

Combobox

You can use the brn-command component as a combobox. See the Combobox page for more information.

Context Menu Combobox