Skip to content
ngx-task

Template Directives (`ngx-task/directives`)

ngx-task/directives provides Angular directives to connect tasks directly to HTML elements without writing event handlers or manual disabled bindings.

import { TaskTriggerDirective, TaskDisableWhilePendingDirective, TaskBusyDirective } from 'ngx-task/directives';

1. [taskTrigger] & [taskArgs]

Automatically triggers task.run(args) on element click (or form submit):

<button [taskTrigger]="saveTask" [taskArgs]="formData">
  Save Form
</button>

When clicked, the directive invokes saveTask.run(formData) and prevents default event actions.

2. [taskDisableWhilePending]

Automatically disables the host element whenever task.pending() is true.

Native Mode (Default)

Sets the HTML disabled attribute:

<button [taskTrigger]="submitTask" taskDisableWhilePending>
  Submit
</button>

ARIA Mode (mode="aria")

Instead of setting HTML disabled, sets aria-disabled="true" and adds [tabindex]="-1" for enhanced accessibility:

<button
  [taskTrigger]="submitTask"
  [taskDisableWhilePending]="submitTask"
  taskDisableMode="aria"
>
  Submit
</button>

3. [taskBusy]

Toggles a CSS busy class or aria-busy attribute on container elements:

<div [taskBusy]="loadDataTask" taskBusyClass="is-loading">
  <!-- Content overlayed while loading -->
</div>