Combobox
listens-combobox@listenssoft/speechui-angularA filterable select with a spoken trigger word: “destination” opens it, “Mars” picks it.
The command word toggles the dropdown. While it's open, spoken words match options (aliases included) — a full match selects and closes; a partial match narrows the visible list, so “euro” filters to Europa. Saying “clear” shortly after the command empties the selection. Typing filters exactly the same way.
Basic combobox
Loading the Angular kit…
Hold anywhere and say:“destination”“destination mars”“clear (after the command)”
Props
- default false
- default command
Angular
Updates as you tick propsimport { Component } from "@angular/core";import { ListensComboBoxComponent } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-combobox", imports: [ListensComboBoxComponent], template: ` <listens-combobox label="Destination" command="destination" [options]="['Luna', 'Mars', 'Europa', 'Titan', 'Ganymede']" placeholder="Choose a destination…" [(value)]="destination" /> `,})export class DemoComboBox { destination = "";}What you can say
| Say | Effect |
|---|---|
| “destination” | Toggles the dropdown. If it was already open with nothing after the word, a brief close-delay runs — you might be about to name an option. |
| “destination mars” | Opens and selects Mars in one phrase. |
| “europa (while open)” | Selects it. Speech only matches options while the dropdown is open — a closed box ignores stray speech. |
| “euro (while open)” | No full match: narrows the list to options containing the fragment. |
| “clear” | Empties the selection — recognized within ~8 seconds of the command word. |
The dropdown never opens from stray speech: only the command word, autoOpenOnListening, or a click opens it.
API reference
Angular inputs & outputs for @listenssoft/speechui-angular.
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
placeholder | string | "" | Input placeholder. |
autoOpenOnListening | boolean | false | Open when listening starts (empty selection only). |
listeningContent | string | command | Label text while the mic is open. |
Extra inputs
| Input | Type | Default | Description |
|---|---|---|---|
value | string | "" | Two-way bindable — [(value)]. (No ControlValueAccessor: this control mirrors the React controlled-props idiom.) |
options | string[] | [] | The selectable options. |
command | string | label | The spoken trigger word. |
label | string | "" | Visible label; the command fallback. |
aliases | Record<string, string[]> | {} | Spoken aliases per option. |
Outputs
| Output | Type | Default | Description |
|---|---|---|---|
valueChange | string | — | The [(value)] channel. |
change | string | — | Emits when a value is committed — select or clear. |
Styling hooks
CSS hooks
| Hook | Type | Default | Description |
|---|---|---|---|
.listens-combobox (root) | class | — | Same part classes as React. |
data-open / data-listening | attribute | — | State attributes on the root. |
Behavior notes
- All frameworks: The close-delay timer (≈1.5s after a bare command word) lives in the component; the interpreter is told when it fires so debouncing stays correct.
