CngxSpeak

Headless text-to-speech directive using the browser's SpeechSynthesis API.

A read-aloud feature for cognitive accessibility - dyslexia support, reading assistance, or convenience. Not a screen reader replacement (use CngxLiveRegion for ARIA live regions).

The directive is purely behavioral: it exposes speaking() and supported() signals plus speak() / cancel() methods. The consumer renders their own UI (button, icon, link) and calls the methods via the template reference.

Pair with CngxSpeakButton (@cngx/ui) for a ready-made speaker button.

Headless - consumer-owned button#

<p [cngxSpeak]="text" #tts="cngxSpeak">
  {{ text }}
  <button (click)="tts.toggle()">{{ tts.speaking() ? 'Stop' : 'Listen' }}</button>
</p>

Auto-speak on dynamic value change#

<div [cngxSpeak]="notification()">{{ notification() }}</div>

With CngxSpeakButton (from @cngx/ui)#

<span [cngxSpeak]="text" #tts="cngxSpeak">{{ text }}</span>
<cngx-speak-button [speakRef]="tts" />

Suppress auto-speak for dynamic values#

<div [cngxSpeak]="liveCounter()" [enabled]="false" #tts="cngxSpeak">
  {{ liveCounter() }}
  <button (click)="tts.speak(liveCounter().toString())">Read current value</button>
</div>

https://cngxjs.github.io/cngx/examples/#/common/interactive/speak/form-error-read-aloud-on-demand https://cngxjs.github.io/cngx/examples/#/common/interactive/speak/headless-read-aloud https://cngxjs.github.io/cngx/examples/#/ui/speak/speak-button/material-integration-theme-scss-mat-icon-button https://cngxjs.github.io/cngx/examples/#/ui/speak/speak-button/styled-speaker-icon https://cngxjs.github.io/cngx/examples/#/ui/speak/speak-button/theming-css-custom-properties