CngxLiveRegion
projects/common/a11y/aria/live-region.directive.ts
Import#
import { CngxLiveRegion } from '@cngx/common/a11y'
Description#
Configures the host element as an ARIA live region.
Screen readers monitor live regions and announce content changes automatically.
polite announcements are queued after the current utterance finishes;
assertive announcements interrupt immediately. off disables announcements.
Sets role="alert" for assertive regions and role="status" for polite regions
via a host binding - no manual attribute wiring needed.
Unlike CDK's LiveAnnouncer service (which creates a hidden DOM element and
requires imperative announce() calls), this directive decorates your own
element declaratively - the content you render IS the announcement.
Status message
<div cngxLiveRegion [politeness]="'polite'">
{{ statusMessage() }}
</div>Form validation error (assertive)
<div cngxLiveRegion [politeness]="'assertive'"
[style.color]="error() ? 'red' : 'transparent'">
{{ error() }}
</div>Metadata#
Host#
Relationships
Index#
Inputs#
"polite" | "assertive" | "off"Controls the urgency of announcements.
'polite'- queued after current speech (default)'assertive'- interrupts immediately'off'- no announcements
'polite'HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-live] | politeness() |
[attr.aria-atomic] | atomic() |
[attr.aria-relevant] | relevant() |
[attr.role] | politeness() === 'off' ? null : politeness() === 'assertive' ? 'alert' : 'status' |