Angular control gallery

Every control the Angular kit exports, with the code to paste.

These are real @listenssoft/speechui-angular snippets, not previews — a Angular app can't run inside this page. To try the interaction model hands-on, the React gallery runs live in the browser; the speech behavior is identical across kits.

Listening bar & popup

Choose between a listening bar at the top of the page, or a compact floating popup. Both show the live transcript and a waveform that pulses to the engine's audio level.

Angular

listens-listening-bar · listens-listening-popup

import { Component } from "@angular/core";
import { ListensListeningBarComponent } from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-listening-bar",
  imports: [ListensListeningBarComponent],
  template: `
    <listens-listening-bar [alwaysShow]="true" />
  `,
})
export class DemoListeningBar {}

Listening bar & popup API reference →

Text

Display text that swaps when listening.

Angular

listens-text

import { Component } from "@angular/core";
import { ListensTextComponent } from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-text",
  imports: [ListensTextComponent],
  template: `
    <p>
      <listens-text listeningContent='“Listening is active”'>
        Hold anywhere on the page to talk.
      </listens-text>
    </p>
  `,
})
export class DemoText {}

Text API reference →

Text field

A single-line input users can type into — or dictate into: “name Jane Doe”.

Angular

listens-input

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 = "";
}

Text field API reference →

Text area

Multi-line dictation with no value filter — say the command and keep talking.

Angular

listens-textarea

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { ListensTextAreaComponent } from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-text-area",
  imports: [ListensTextAreaComponent, FormsModule],
  template: `
    <listens-textarea
      label="Notes"
      command="notes"
      [rows]="4"
      placeholder="Dictate mission notes…"
      [(ngModel)]="notes"
    />
  `,
})
export class DemoTextArea {
  notes = "";
}

Text area API reference →

Label button

A styled button that fires when its command is heard — “launch” clicks it.

Angular

listens-label-button

import { Component, signal } from "@angular/core";
import { ListensLabelButtonComponent } from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-label-button",
  imports: [ListensLabelButtonComponent],
  template: `
    <div style="display: grid; gap: 8px; justify-items: start">
      <listens-label-button
        label="Launch"
        command="launch"
        (clicked)="count.set(count() + 1)"
      />
      <span>Launched {{ count() }} times</span>
    </div>
  `,
})
export class DemoLabelButton {
  count = signal(0);
}

Label button API reference →

Button (bare)

A plain native button that responds to speech — zero kit markup, zero kit styles. Yours to design.

Angular

button[listensCommand]

import { Component, signal } from "@angular/core";
import { ListensCommandDirective } from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-bare-button",
  imports: [ListensCommandDirective],
  template: `
    <!-- On a native button, the command directive IS the bare button -->
    <button
      listensCommand="engage"
      listensLabel="Engage"
      class="my-pill-button"
      (click)="count.set(count() + 1)"
    >
      Engage ({{ count() }})
    </button>
  `,
  styles: `
    .my-pill-button {
      padding: 8px 18px;
      border-radius: 999px;
      border: 1px solid #888;
      background: transparent;
      font: inherit;
      cursor: pointer;
    }
  `,
})
export class DemoBareButton {
  count = signal(0);
}

Button (bare) API reference →

Input (bare)

A plain native input that takes dictation — zero kit markup, zero kit styles. Yours to design.

Angular

input[listensInput]

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 = "";
}

Input (bare) API reference →

Toggle

An on/off switch that flips when its command is heard: “dark mode”.

Angular

listens-toggle

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { ListensToggleComponent } from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-toggle",
  imports: [ListensToggleComponent, FormsModule],
  template: `
    <listens-toggle
      label="Dark mode"
      command="dark mode"
      [(ngModel)]="enabled"
    />
  `,
})
export class DemoToggle {
  enabled = false;
}

Toggle API reference →

Toggle button & group

Press-to-activate buttons; grouped, they form a mutually-exclusive segmented control you can address by voice.

Angular

button[listensToggleButton] · listens-toggle-button-group

import { Component, signal } from "@angular/core";
import {
  ListensToggleButtonComponent,
  ListensToggleButtonGroupComponent,
} from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-toggle-buttons",
  imports: [ListensToggleButtonComponent, ListensToggleButtonGroupComponent],
  template: `
    <div style="display: grid; gap: 8px; justify-items: start">
      <listens-toggle-button-group>
        <button
          listensToggleButton
          label="Day"
          [checked]="view() === 'Day'"
          (checkedChange)="$event && view.set('Day')"
        ></button>
        <button
          listensToggleButton
          label="Week"
          [checked]="view() === 'Week'"
          (checkedChange)="$event && view.set('Week')"
        ></button>
        <button
          listensToggleButton
          label="Month"
          [checked]="view() === 'Month'"
          (checkedChange)="$event && view.set('Month')"
        ></button>
      </listens-toggle-button-group>
      <span>Showing: {{ view() }}</span>
    </div>
  `,
})
export class DemoToggleButtons {
  view = signal("Day");
}

Toggle button & group API reference →

Slider

A slider users can drag — or set by voice: “volume to seventy”.

Angular

listens-slider

import { Component } from "@angular/core";
import { ListensSliderComponent } from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-slider",
  imports: [ListensSliderComponent],
  template: `
    <listens-slider label="Volume" command="volume" [(value)]="volume" />
  `,
})
export class DemoSlider {
  volume = 40;
}

Slider API reference →

Radio group

Single select by voice: “size large” picks Large.

Angular

listens-radio-group

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { ListensRadioGroupComponent } from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-radio-group",
  imports: [ListensRadioGroupComponent, FormsModule],
  template: `
    <listens-radio-group
      label="Size"
      command="size"
      [options]="['Small', 'Medium', 'Large']"
      [(ngModel)]="size"
    />
  `,
})
export class DemoRadioGroup {
  size = "Medium";
}

Radio group API reference →

Checkbox

Multi select by voice: “toppings cheese and olives” toggles both.

Angular

listens-checkbox

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { ListensCheckboxComponent } from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-checkbox",
  imports: [ListensCheckboxComponent, FormsModule],
  template: `
    <listens-checkbox
      label="Toppings"
      command="toppings"
      [options]="['Cheese', 'Mushrooms', 'Olives', 'Peppers']"
      [(ngModel)]="toppings"
    />
  `,
})
export class DemoCheckbox {
  toppings = ["Cheese"];
}

Checkbox API reference →

Picker

A color picker whose grid opens on command and answers to color names: “color dark red”.

Angular

listens-picker

import { Component } from "@angular/core";
import { ListensPickerComponent } from "@listenssoft/speechui-angular";

@Component({
  selector: "demo-picker",
  imports: [ListensPickerComponent],
  template: `
    <listens-picker label="Accent color" command="color" [(value)]="color" />
  `,
})
export class DemoPicker {
  color = "blue";
}

Picker API reference →

List

An editable checklist you can talk to: “checklist add fuel cells and rations”.

Angular

listens-list

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 },
  ]);
}

List API reference →

Combobox

A filterable select with a spoken trigger word: “destination” opens it, “Mars” picks it.

Angular

listens-combobox

import { 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 = "";
}

Combobox API reference →

Command

The headless primitive: attach a spoken command to anything and run your own code when it's heard.

Angular

[listensCommand]

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);
  }
}

Command API reference →