Skip to main content
cngx-src documentation

CngxDgaRowBusy

Directivev0.1.0WCAG AA

projects/ui/data-grid-accordion/data-grid-row-busy.directive.ts

Import#

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

Description#

Structural slot for a CngxDataGridRow's busy state. The row renders it inside the detail region while the row's [state] is loading (a first-load skeleton that replaces the body) or refreshing (a subtle overlay with the body kept mounted). Absent, the row falls back to its CSS skeleton default.

The region already carries aria-busy as a computed(), so the busy visual is decorative (aria-hidden); assistive tech learns the busy state from aria-busy, not from this template. The template receives a CngxDgaRowStateContext whose $implicit is the current status (loading / refreshing), so one override can distinguish the two.

<cngx-dga-row [state]="report.status()">
  <span cngxDgaCell primary>Report</span>
  <ng-template cngxDgaRowBusy let-status><my-skeleton [dim]="status === 'refreshing'" /></ng-template>
  {{ report.data() }}
</cngx-dga-row>

Metadata#

Dependencies#

TemplateRefinject()templateRef

Index#

Methods#

ngTemplateContextGuard#CngxDgaRowStateContext
Static
ngTemplateContextGuard(_dir: CngxDgaRowBusy, ctx: unknown)
@param_dirCngxDgaRowBusy
@paramctxunknown