CngxDialogTitle

DirectivePrimaryv0.1.0WCAG AA

projects/common/dialog/dialog/dialog-title.directive.ts

Import#

import { CngxDialogTitle } from '@cngx/common/dialog'

Description#

Marks an element as the dialog's title for ARIA labelling.

Automatically generates a deterministic ID and registers with the parent CngxDialog for aria-labelledby. The title text is also announced via aria-live when the dialog transitions to 'open'.

<dialog cngxDialog>
  <h2 cngxDialogTitle>Confirm Delete</h2>
  …
</dialog>

Metadata#

Selector: [cngxDialogTitle]
Export as: cngxDialogTitle

Host#

Static attributes: [id]id()

Index#

Properties

id textContent

HostBindings

Instance Properties#

id#unknown

Readonly

Auto-generated unique ID bound to the host [id] attribute.

Used by CngxDialog for aria-labelledby. When a parent CngxDialog is present, the ID is derived from the dialog's ID (e.g. cngx-dialog-0-title). Read-only: an externally mutated id would silently break the ARIA wiring.

this.idState.asReadonly()

textContent#unknown

Readonly

Text content of the title element, read fresh on every call.

Read by CngxDialog at announce time (each 'open' transition) so a changed title - translation swap, interpolated data - is what screen readers hear. A computed would cache the first non-reactive DOM read forever.

() => {...}

HostBindings#

Binding	Expression
`[id]`	`id()`