Command
[listensCommand]@listenssoft/speechui-angularThe headless primitive: attach a spoken command to anything and run your own code when it's heard.
Every trigger control — label button, toggle, toggle button — is this primitive plus rendering. Use it directly to make your existing components speech-aware: give it a command and a callback; it handles matching, claims, and the interim-result cooldown.
Wiring a command to your own UI
Loading the Angular kit…
Hold anywhere and say:“undock”
Angular
import { Component, signal } from "@angular/core";import { ListensCommandDirective } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-command", imports: [ListensCommandDirective], template: ` <div style="display: grid; gap: 8px; justify-items: start"> <!-- the directive click()s its host when the command is heard --> <button listensCommand="undock" listensLabel="Undock" (click)="status.set('undocked')" (listensMatched)="onMatched($event)" > Undock </button> <span>Status: {{ status() }}</span> </div> `,})export class DemoCommand { status = signal("docked"); onMatched(transcript: string) { console.log("matched:", transcript); }}Page-level commands (React only)
useListensGlobalCommand registers a command tied to no element — navigation, mode switches, anything page-wide.
Angular
// No Angular equivalent yet. For page-level actions, attach the
// command directive to an invisible host, or subscribe to
// ListensSpeechService and match in your own code:
//
// private readonly service = inject(ListensSpeechService);
// // service.text() is the live transcript signal (opt-in re-renders)What you can say
| Say | Effect |
|---|---|
| “undock” | Runs onTriggered once (contains match, claims respected, ~1s cooldown per command). |
| “…prepare to undock now…” | Also fires — the command may appear anywhere in the phrase. |
API reference
Angular inputs & outputs for @listenssoft/speechui-angular.
Inputs (directive: [listensCommand])
| Input | Type | Default | Description |
|---|---|---|---|
listensCommand | string | — | The phrase to listen for. When heard, the host element is click()ed — on a native button this is the bare button. |
listensLabel | string | "" | Fallback command when listensCommand is empty. |
Outputs
| Output | Type | Default | Description |
|---|---|---|---|
listensMatched | string | — | Emits the matched transcript when the command fires. |
Behavior notes
- Angular: The directive performs the host's native
click(), so it composes with anything clickable — including atype="submit"button inside a form.
