ngx-task

Why ngx-task?

Signal-First Reactivity

Native integration with @angular/core signals. Bind directly to task.pending(), task.running(), task.result(), and task.error() for fine-grained, flicker-free template updates.

Explicit Concurrency Control

Answer the core question: “What should happen when this operation is invoked again before it finishes?” Select from drop, restart, enqueue, latest, or parallel.

Cooperative Cancellation

Automatic AbortSignal for Promise handlers and unsubscribe() for RxJS Observables. Cancels in-flight network requests on component destroy, timeout, or policy supersedes.

Production Ready Features

Built-in anti-flicker timing (pendingDelay, minimumPendingDuration), explicit timeouts, error classification, progress tracking, and manual retry support.

---

Quick Example

profile-editor.component.ts

import { Component, inject } from '@angular/core';
import { createTask, TaskTriggerDirective, TaskDisableWhilePendingDirective } from 'ngx-task';

@Component({
  selector: 'app-profile-editor',
  standalone: true,
  imports: [TaskTriggerDirective, TaskDisableWhilePendingDirective],
  template: `
    <button
      type="button"
      [taskTrigger]="saveProfile"
      [taskArgs]="userForm"
      taskDisableWhilePending
    >
      @if (saveProfile.pending()) {
        Saving…
      } @else {
        Save Profile
      }
    </button>

    @if (saveProfile.error(); as err) {
      <p class="error">{{ err.message }}</p>
    }
  `,
})
export class ProfileEditorComponent {
  private api = inject(ProfileApiService);
  readonly userForm = { name: 'Alice', email: 'alice@example.com' };

  readonly saveProfile = createTask(
    async (profile, { signal }) => {
      return this.api.saveProfile(profile, { signal });
    },
    {
      concurrency: 'drop', // Ignores duplicate clicks while running
      timeout: 15_000,     // Auto abort after 15 seconds
      pendingDelay: 150,   // Prevents visual flicker on quick responses
    },
  );
}

---

Concurrency Policies at a Glance

Policy	Behavior	Common Use Cases
drop	Ignores new invocations while active.	Payment checkout, Form submission, Login
restart	Cancels active execution and runs newest.	Search autocomplete, Live filter, Tab switch
enqueue	Executes invocations sequentially in FIFO order.	Audit log stream, Sequential file upload
latest	Keeps active, but queues only the newest invocation.	Document autosave, Canvas/Slider sync
parallel	Runs up to limit executions simultaneously.	Bulk file uploads, Parallel asset loading