CngxAsync

DirectivePrimaryv0.1.0WCAG AA

projects/common/data/async/async.directive.ts

GitHub

Import#

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

Description#

Structural directive for async state-driven content rendering.

Renders different views based on the current CngxAsyncState status:

loading (first load) → skeleton template (or nothing)
success + has data → content template with typed data
success + empty → empty template (or nothing)
error (first load) → error template (or nothing)
refreshing / loading (with data) → content template (old data stays visible)
error (with data) → content template (old data stays visible)

Minimal - just content

<ul *cngxAsync="residents; let data">
  @for (r of data; track r.id) { <li>{{ r.name }}</li> }
</ul>

With custom templates

<ul *cngxAsync="residents; let data; skeleton: skelTpl; empty: emptyTpl; error: errTpl">
  @for (r of data; track r.id) { <li>{{ r.name }}</li> }
</ul>

<ng-template #skelTpl>
  @for (i of [1,2,3]; track i) { <li class="skeleton-line"></li> }
</ng-template>

<ng-template #emptyTpl>
  <li>No residents found.</li>
</ng-template>

<ng-template #errTpl let-err>
  <li>Error: {{ err }}</li>
</ng-template>

https://cngxjs.github.io/cngx/examples/#/ui/feedback/async-container/cngx-async-container-full-control-toast https://cngxjs.github.io/cngx/examples/#/ui/feedback/async-container/cngxasync-one-line https://cngxjs.github.io/cngx/examples/#/ui/feedback/async-container/cngxasync-with-custom-templates https://cngxjs.github.io/cngx/examples/#/ui/feedback/async-container/composition-overlay-container-toast https://cngxjs.github.io/cngx/examples/#/ui/feedback/async-container/createasyncstate-mutation https://cngxjs.github.io/cngx/examples/#/ui/feedback/async-container/injectasyncstate-reactive-query

Metadata#

Selector: [cngxAsync]

Index#

Methods

ngTemplateContextGuard

Inputs

cngxAsync cngxAsyncEmpty cngxAsyncError cngxAsyncSkeleton

Inputs#

cngxAsync#CngxAsyncState

Required

The async state to render.

cngxAsyncEmpty#TemplateRef | undefined

Optional empty template shown when data is empty after success.

cngxAsyncError#TemplateRef<{ $implicit: unknown }> | undefined

Optional error template shown on error during first load. Context: { $implicit: error }.

cngxAsyncSkeleton#TemplateRef | undefined

Optional skeleton template shown during first load.

Methods#

ngTemplateContextGuard#CngxAsyncContext

Static

ngTemplateContextGuard(_dir: CngxAsync<T>, _ctx: unknown)

Type guard for template type inference.

@param_dirCngxAsync

@param_ctxunknown