CngxErrorAggregator

Aggregates one-or-more CngxErrorSource children into a single live A11y surface.

Each registered source contributes a key + a live Signal<boolean> + an optional label. Derived signals (hasError, errorCount, activeErrors, errorLabels, shouldShow, announcement) are computed() with structural equal fns so unrelated re-emissions upstream do not cascade through descendants.

Live region#

By default the directive appends a visually-hidden <span> to the host element and writes announcement into its textContent reactively, so an aria-live announcement fires the moment a source toggles. The span carries role="status" (or role="alert" when politeness is 'assertive'), aria-live, aria-atomic="true", and aria-relevant="additions text". Visually-hidden styling is applied inline via --cngx-sr-only-* CSS custom properties — no global stylesheet required.

Set [autoAnnounce]="false" to take ownership of the live region in consumer markup (for example, when routing announcements through CDK's LiveAnnouncer service). Use [announcePoliteness] to switch to 'assertive' for safety-critical errors or 'off' to suppress announcements entirely while keeping the visual error surface.

<fieldset cngxErrorAggregator #agg="cngxErrorAggregator">
  <span cngxErrorSource="format" [when]="email().invalid()" label="Format"></span>
  <span cngxErrorSource="taken"  [when]="taken()"          label="Already used"></span>

  @if (agg.shouldShow()) {
    <ul role="alert">
      @for (label of agg.errorLabels(); track label) {
        <li>{{ label }}</li>
      }
    </ul>
  }
</fieldset>

https://cngxjs.github.io/cngx/examples/#/common/interactive/error/aggregator/cngx-card-host-no-scope-errors-visible-immediately https://cngxjs.github.io/cngx/examples/#/common/interactive/error/aggregator/cngx-popover-panel-host https://cngxjs.github.io/cngx/examples/#/common/interactive/error/aggregator/material-mat-tab-label-with-error-count-badge https://cngxjs.github.io/cngx/examples/#/common/interactive/error/aggregator/native-form-scope-reveal-on-submit https://cngxjs.github.io/cngx/examples/#/ui/stepper/stepper-error-aggregation/per-step-error-badges https://cngxjs.github.io/cngx/examples/#/ui/tabs/tab-error-aggregation/per-tab-error-badges