CngxAsyncBoundary
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
Depends on1
Index#
Inputs#
readonly AggregateSource[]The keyed source list to aggregate.
{ alias: 'cngxAsyncBoundary' }Instance Properties#
unknownThe derived aggregate state - also exposed via CNGX_STATEFUL.
createAggregateAsyncState(this.states)HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-busy] | state.isBusy() || null |