Text field
listens-input@listenssoft/speechui-angularA single-line input users can type into — or dictate into: “name Jane Doe”.
Say the command and keep talking: the field claims the phrase and streams the remainder into its value as you speak, filtered by type — emails lose their spaces and gain an @, numbers parse from words, names capitalize. When listening stops, onMatch fires once with the final value.
Basic dictation
Loading the Angular kit…
Hold anywhere and say:“name jane doe”“name arthur dent”
Props
- default command
- default false
import { Component } from "@angular/core";import { FormsModule } from "@angular/forms";import { ListensInputComponent } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-text-field", imports: [ListensInputComponent, FormsModule], template: ` <listens-input label="Name" command="name" type="name" placeholder="Jane Doe" [(ngModel)]="name" /> `,})export class DemoTextField { name = "";}Value types filter the dictation
type shapes what lands in the value: email converts a spoken “at” to @ and strips spaces (“email jane at example dot com” — say “dot” as “.” is up to the recognizer); number parses spoken numbers (“age forty two” → 42); letters drops digits; name capitalizes each word; url strips spaces.
Loading the Angular kit…
Hold anywhere and say:“email jane at example.com”“age forty two”
import { Component } from "@angular/core";import { FormsModule } from "@angular/forms";import { ListensInputComponent } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-text-field-types", imports: [ListensInputComponent, FormsModule], template: ` <div style="display: grid; gap: 12px"> <listens-input label="Email" command="email" type="email" [(ngModel)]="email" /> <listens-input label="Age" command="age" type="number" [(ngModel)]="age" /> </div> `,})export class DemoTextFieldTypes { email = ""; age = "";}What you can say
| Say | Effect |
|---|---|
| “name jane doe” | Starts-with match: claims the phrase and streams “jane doe” into the value as you speak (filtered by type). |
| “the name is jane doe” | Contains fallback: if no other control claimed the phrase, sets the value to the words after the command (“is jane doe”). The command with nothing after it leaves the value unchanged. |
| “f i v e” | Spelled-out runs collapse to words before filtering (“five”). |
While you keep speaking, interim results keep updating the value — dictation feels live, not batched. onMatch fires exactly once, when listening stops, with the final accumulated value.
API reference
Angular inputs & outputs for @listenssoft/speechui-angular.
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
type | ListensTextValueType | "text" | Dictation filter; also the input's behavior where it's a real HTML type. |
placeholder | string | "" | Native placeholder. |
listeningContent | string | command | Text shown as the label while the mic is open. |
disabled | boolean | false | Disables the input; forms setDisabledState toggles it too. |
Extra inputs
| Input | Type | Default | Description |
|---|---|---|---|
value | string | "" | Two-way bindable — [(value)]. Also driven by ngModel / formControlName (ControlValueAccessor). |
command | string | label | The spoken prefix that starts dictation. |
label | string | "" | Label above the input; the command fallback. |
name | string | — | Native name attribute. |
id | string | — | Id for the input (pairs the label). |
Outputs
| Output | Type | Default | Description |
|---|---|---|---|
valueChange | string | — | Every value change (typing or dictation) — the [(value)] channel. |
matched | string | — | Fires once when listening stops, with the final accumulated value. |
Styling hooks
CSS hooks
| Hook | Type | Default | Description |
|---|---|---|---|
.listens-text-field (root) | class | — | Same part convention: -label, -input. |
data-listening | attribute | — | On the root while the mic is open. |
Behavior notes
- All frameworks: A starts-with match claims the transcript, so a field named “name” won't also trigger a button whose command appears later in the same phrase.
- Angular: For a completely unstyled input, use the bare input directive — same interpreter, zero markup.
