Skip to main content
cngx-src documentation

CngxAsyncBoundary

Directivev0.1.0

projects/common/data/async-state/async-boundary.directive.ts

Import#

import { CngxAsyncBoundary } from '@cngx/common/data'

Description#

Headless boundary that aggregates N keyed CngxAsyncStates into one derived CngxAsyncState and provides it as CNGX_STATEFUL.

The aggregate state is a first-class CngxAsyncState, so it renders through <cngx-async-container [state]="b.state"> and every other consumer unchanged, and any transition bridge (cngxToastOn, cngxAlertOn, cngxBannerOn) nested in the host fires on the combined status with zero [state] wiring. failures exposes the errored sources - keyed, so a consumer's @for can render per-source attribution through any feedback component. state.error stays the first error for the single-error path.

<div [cngxAsyncBoundary]="sources" #b="cngxAsyncBoundary">
  <cngx-async-container [state]="b.state"> ... </cngx-async-container>
  <cngx-toast-on />
  @for (f of b.failures(); track f.key) {
    <cngx-banner>{{ f.label }} failed</cngx-banner>
  }
</div>

Metadata#

Host#

Providers#

CNGX_STATEFUL
useExisting CngxAsyncBoundary

Relationships

Index#

Properties

Inputs

Derived State

HostBindings

Inputs#

input()Required

The keyed source list to aggregate.

default { alias: 'cngxAsyncBoundary' }

Instance Properties#

state#unknown
Readonly

The derived aggregate state - also exposed via CNGX_STATEFUL.

createAggregateAsyncState(this.states)

HostBindings#

BindingExpression
[attr.aria-busy]state.isBusy() || null