Input (bare)
input[listensInput]@listenssoft/speechui-angularA plain native input that takes dictation — zero kit markup, zero kit styles. Yours to design.
Same speech behavior as the text field — claim on a starts-with match, stream the remainder into the value filtered by type, contains fallback, onMatch flushed once on stop — rendered as exactly one native element with nothing added. While the mic is open the element carries data-listening.
Your input, our dictation
All visible styling belongs to the sample; the kit adds only behavior.
Loading the Angular kit…
Hold anywhere and say:“callsign rocinante”“callsign apollo”
Props
- not set
- not set
import { Component } from "@angular/core";import { FormsModule } from "@angular/forms";import { ListensInputDirective } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-bare-input", imports: [ListensInputDirective, FormsModule], template: ` <label style="display: grid; gap: 4px"> Callsign <!-- A native input; the directive adds dictation, no markup --> <input listensInput="callsign" listensLabel="Callsign" listensType="letters" class="my-input" [(ngModel)]="callsign" /> </label> `, styles: ` .my-input { padding: 8px 10px; border: 1px solid #888; border-radius: 6px; font: inherit; } `,})export class DemoBareInput { callsign = "";}What you can say
| Say | Effect |
|---|---|
| “callsign rocinante” | Starts-with match: streams “rocinante” into the value (filtered by type). |
| “the callsign is rocinante” | Contains fallback: sets the value to the words after the command (“is rocinante”) if nothing else claimed the phrase. |
See the text field for the full dictation semantics — they are identical by design.
API reference
Angular inputs & outputs for @listenssoft/speechui-angular.
Inputs (directive: [listensInput] on a native input or textarea)
| Input | Type | Default | Description |
|---|---|---|---|
listensType | ListensTextValueType | — | Speech filter override. Defaults from the element's own type attribute (email/number/url/date); use it for the filter-only values letters and name. |
The directive deliberately has no ControlValueAccessor: on a speech decision it writes the native element's value and dispatches a real bubbling input event, so [(ngModel)], reactive forms, or any plain listener observes the change natively.
Extra inputs (directive: [listensInput] on a native input or textarea)
| Input | Type | Default | Description |
|---|---|---|---|
listensInput | string | — | The spoken command prefix (the directive's bound value). |
listensLabel | string | "" | Contract label and command fallback. |
Outputs
| Output | Type | Default | Description |
|---|---|---|---|
listensMatched | string | — | Fires once, when listening stops, with the final accumulated value. |
Styling hooks
Styling hooks
| Hook | Type | Default | Description |
|---|---|---|---|
(none added) | — | — | The directive adds no classes or markup to its host. |
data-listening | attribute | — | Present on the host while the mic is open. |
Behavior notes
- Angular: Works on
<textarea listensInput>too — that's the bare text area.
