CngxDgaCount

Directivev0.1.0WCAG AA

projects/ui/data-grid-accordion/data-grid-count.directive.ts

Import#

import { CngxDgaCount } from '@cngx/ui/data-grid-accordion'

Description#

A polite aria-live region for the visible-row count of a CngxDataGridAccordion. The consumer feeds the count it already derived ([cngxDgaCount]="visibleRows().length"); the directive makes its host a role="status" / aria-live="polite" / aria-atomic="true" region and writes the count text into it, so a filter that changes the count is announced to assistive tech without the consumer wiring a live region by hand (Pillar 2 - the count change is communicated, always in the DOM, content reactive).

The host owns its text, so give it an empty element:

<cngx-dga-footer>
  <span [cngxDgaCount]="visibleRows().length"></span>
</cngx-dga-footer>

The noun is English by default (result / results); a consumer localises via cngxDgaCountSingular / cngxDgaCountPlural.

https://cngxjs.github.io/cngx/examples/#/ui/data-grid-accordion/sortable-ledger

Metadata#

Selector: [cngxDgaCount]
Export as: cngxDgaCount

Host#

Class: cngx-dga-count
Static attributes: rolestatus
aria-livepolite
aria-atomictrue

Index#

Inputs

count plural singular

Inputs#

count#number

input()Required

The visible-row count the consumer derived.

default { alias: 'cngxDgaCount' }

plural#

input()

Plural noun for any other count. English default.

default 'results', { alias: 'cngxDgaCountPlural' }

singular#