CngxAsyncClick
projects/common/interactive/async-click/async-click.directive.ts
Import#
import { CngxAsyncClick } from '@cngx/common/interactive'
Description#
Async action handler with loading state, auto-disable, and success/error feedback.
Place on any clickable element (button, link, div). Executes the provided async action on click, tracks the full lifecycle as a state machine, auto-disables during execution, announces state changes to screen readers, and guards against double-clicks.
Basic usage
<button [cngxAsyncClick]="saveAction" #btn="cngxAsyncClick">
@switch (btn.status()) {
@case ('pending') { Saving... }
@case ('success') { Saved! }
@case ('error') { Failed }
@default { Save }
}
</button>With Material
<button mat-raised-button [cngxAsyncClick]="submitForm" #btn="cngxAsyncClick">
@if (btn.pending()) { <mat-spinner diameter="20" /> Submitting... }
@else { Submit }
</button>On any element
<a role="button" [cngxAsyncClick]="navigate" #btn="cngxAsyncClick">Go</a>Metadata#
Host#
Relationships
Index#
Inputs#
AsyncActionThe async action to execute on click.
{ alias: 'cngxAsyncClick' }When false, clicks are ignored (does not set disabled attribute).
trueLabel announced to screen readers on failure.
'Action failed'Instance Properties#
SignalThe error value from a failed action. Cleared on reset.
this.errorState.asReadonly()Signaltrue for feedbackDuration ms after a failed action.
this.failedState.asReadonly()CngxAsyncStateFull CngxAsyncState view of this directive's lifecycle.
Bind to any state consumer ([state]="btn.state") to connect the
feedback system - toasts, alerts, skeletons, async containers.
buildAsyncStateView<unknown>({
status: this.status,
data: computed(() => undefined),
error: this.error,
lastUpdated: this.lastUpdatedState.asReadonly(),
})Signaltrue for feedbackDuration ms after a successful action.
this.succeededState.asReadonly()HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-async--pending] | pending() |
[class.cngx-async--success] | succeeded() |
[class.cngx-async--error] | failed() |
[attr.aria-busy] | pending() || null |
[attr.aria-disabled] | pending() || null |
[attr.disabled] | shouldDisable() |
HostListeners#
| Event | Handler |
|---|---|
(click) | click() |