Skip to main content
cngx-src documentation

CngxAsyncStatus

DirectivePrimaryv0.1.0WCAG AA

projects/common/interactive/async-status/async-status.directive.ts

Import#

import { CngxAsyncStatus } from '@cngx/common/interactive'

Description#

Reflects an externally-owned CngxAsyncState onto its host - the read-only sibling of CngxAsyncClick. Where CngxAsyncClick runs an action and owns its own lifecycle, CngxAsyncStatus reads a state someone else produces (a presenter's commitState, a resource) and surfaces it as aria-busy, an optional disabled gate, and the pending / succeeded / failed slot markers.

One responsibility - reflection - kept distinct from running an action (Pillar 3). aria-busy lives in the computed() graph (Pillar 2) and is owned here exclusively: never co-place this with CngxAsyncClick on the same element, since both bind aria-busy (dev mode warns).

<button [cngxAsyncStatus]="presenter.commitState" disableWhilePending>
  Continue
  <ng-template cngxPending>Saving…</ng-template>
</button>

Metadata#

Host#

Index#

Inputs#

disableWhilePending#boolean
input()

When true, the host reflects aria-disabled / disabled while busy.

default false

The externally-owned state to reflect. null reflects as idle.

default null, { alias: 'cngxAsyncStatus' }

HostBindings#

BindingExpression
[attr.aria-busy]isBusy() || null
[attr.aria-disabled]disabledAttr() !== null || null
[attr.disabled]disabledAttr()