Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
Neon
WorkOS
Clerk
Convex
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
Neon
WorkOS
Clerk
Convex
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
Debouncer API Reference
Throttler API Reference
Rate Limiter API Reference
Queue API Reference
Batcher API Reference
Queue API Reference

injectAsyncQueuer

Function: injectAsyncQueuer()

ts
function injectAsyncQueuer<TValue, TSelected>(
   fn, 
   options, 
selector): AngularAsyncQueuer<TValue, TSelected>;

Defined in: angular-pacer/src/async-queuer/injectAsyncQueuer.ts:96

An Angular function that creates and manages an AsyncQueuer instance.

This is a lower-level function that provides direct access to the AsyncQueuer's functionality. This allows you to integrate it with any state management solution you prefer.

The AsyncQueuer processes items asynchronously with support for concurrent execution, promise-based processing, error handling, retry capabilities, and abort support.

State Management and Selector

The function uses TanStack Store for state management and wraps it with Angular signals. The selector parameter allows you to specify which state changes will trigger signal updates, optimizing performance by preventing unnecessary updates when irrelevant state changes occur.

By default, there will be no reactive state subscriptions and you must opt-in to state tracking by providing a selector function. This prevents unnecessary updates and gives you full control over when your component tracks state changes.

Cleanup on Destroy

By default, the function stops the queuer and aborts in-flight work when the component is destroyed. Use the onUnmount option to customize this. For example, to flush pending items instead:

ts
const queuer = injectAsyncQueuer(fn, {
  concurrency: 2,
  onUnmount: (q) => q.flush()
});

When using onUnmount with flush, guard your callbacks since the component may already be destroyed.

Type Parameters

TValue

TValue

TSelected

TSelected = { }

Parameters

fn

(value) => Promise<any>

options

AngularAsyncQueuerOptions<TValue, TSelected> = {}

selector

(state) => TSelected

Returns

AngularAsyncQueuer<TValue, TSelected>

Example

ts
// Default behavior - no reactive state subscriptions
const queuer = injectAsyncQueuer(
  async (item: Data) => {
    const response = await fetch('/api/process', {
      method: 'POST',
      body: JSON.stringify(item)
    });
    return response.json();
  },
  { concurrency: 2, wait: 1000 }
);

// Add items
queuer.addItem(data1);
queuer.addItem(data2);

// Access the selected state
const { items, isExecuting } = queuer.state();