List
listens-list@listenssoft/speechui-angularAn editable checklist you can talk to: “checklist add fuel cells and rations”.
The most conversational control: add, delete, check, uncheck, rename, and clear — by voice. Adds stream in live (say “add milk and eggs” and watch two items form as you speak); renames chain correctly across interim results (“rename chicken to beef” lands on beef, not half a word). Tapping a row toggles it; the ✕ deletes.
Basic editable list
Loading the Angular kit…
Hold anywhere and say:“checklist add fuel cells and rations”“checklist check star charts”“checklist delete rations”
Props
- default command
- default false
import { Component, signal } from "@angular/core";import { ListensListComponent } from "@listenssoft/speechui-angular";import type { ListensListItem } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-list", imports: [ListensListComponent], template: ` <listens-list label="Pre-flight checklist" command="checklist" [(value)]="items" /> `,})export class DemoList { items = signal<ListensListItem[]>([ { id: "1", text: "oxygen tanks", checked: true }, { id: "2", text: "star charts", checked: false }, ]);}What you can say
| Say | Effect |
|---|---|
| “checklist add fuel cells and rations” | Adds two items — “and” separates them; the items refine live while you speak. |
| “checklist delete rations” | Deletes the item whose text matches. “remove” works as a synonym. |
| “checklist check star charts” | Checks the matching item; “uncheck …” clears it. |
| “checklist rename star charts to nav charts” | Renames in place — the new name accumulates correctly as you speak. |
| “checklist clear” | Removes every item. |
With no command configured, the bare action words work directly: “add milk”, “clear”. Item-name matching is on the normalized text (case and quotes ignored). onMatch fires once when listening stops, with the final items.
API reference
Angular inputs & outputs for @listenssoft/speechui-angular.
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
listeningContent | string | command | Label text while the mic is open. |
disabled | boolean | false | Disables row interaction. |
Extra inputs
| Input | Type | Default | Description |
|---|---|---|---|
value | ListensListItem[] | [] | Two-way bindable items — [(value)]. |
command | string | label | The spoken action prefix. |
label | string | "" | Label above the list; the command fallback. |
Outputs
| Output | Type | Default | Description |
|---|---|---|---|
valueChange | ListensListItem[] | — | The [(value)] channel. |
matched | ListensListItem[] | — | Fires once when listening stops after speech edits, with the final items. |
Styling hooks
CSS hooks
| Hook | Type | Default | Description |
|---|---|---|---|
.listens-list (root) | class | — | Same part classes as React (-items, -item, -item-checkbox…). |
data-listening | attribute | — | On the root while the mic is open. |
Behavior notes
- All frameworks: Utterance boundaries matter and are handled: pause, then “checklist add beef” starts a new item instead of revising the previous one.
