Skip to main content
cngx-src documentation

CngxAccordionItemError

Directivev0.1.0WCAG AA

projects/ui/accordion/accordion-item-error.directive.ts

Import#

import { CngxAccordionItemError } from '@cngx/ui/accordion'

Description#

Structural slot for a CngxAccordionItem's error state. The item renders it inside the region, in a role="alert" container, when the item's [state] is error - so the error body is announced to assistive tech the moment it appears. Absent, the item renders a minimal CSS error affordance; the announced message is this slot's responsibility (author it with the error text, e.g. a retry action).

The template receives a CngxAccordionItemStateContext whose message is the resolved error string, so the override can render the announced text (and a retry) without re-deriving it.

<cngx-accordion-item [state]="report.status()">
  <span cngxAccordionItemTitle>Report</span>
  <ng-template cngxAccordionItemError let-message="message">
    {{ message }} <button type="button" (click)="retry()">Retry</button>
  </ng-template>
</cngx-accordion-item>

Metadata#

Dependencies#

TemplateRefinject()templateRef

Index#

Methods#

ngTemplateContextGuard#CngxAccordionItemStateContext
Static
ngTemplateContextGuard(_dir: CngxAccordionItemError, ctx: unknown)
@paramctxunknown