Angular Academy · Lesson

rxMethod for Async Work

Handle async flows with rxMethod.

rxMethod for Async Work is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Async In SignalStore

Many actions are asynchronous: loading data, debounced search, polling. SignalStore offers rxMethod to manage these reactive, cancellable async flows.

rxMethod Basics

rxMethod creates a method backed by an RxJS pipeline. You call it with a value (or a signal/observable) and it pushes into the stream.

import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';

withMethods((store, api = inject(Api)) => ({
  load: rxMethod<string>(pipe(
    switchMap(id => api.getById(id)),
    tap(item => patchState(store, { current: item }))
  ))
}))

Calling rxMethod

Invoke it like a normal method with a plain value. The value enters the pipeline you defined.

store.load('42');

Passing a Signal

You can pass a signal to an rxMethod. It re-runs the pipeline automatically whenever that signal changes, perfect for reactive loads.

selectedId = signal('1');
ngOnInit() {
  this.store.load(this.selectedId); // reloads when selectedId changes
}

switchMap Cancels Stale Work

Using switchMap means a new emission cancels the previous in-flight request. This avoids race conditions where an old slow response overwrites a newer one.

Tracking Loading State

Patch a loading flag at the start and clear it on completion, so the UI can show spinners.

load: rxMethod<string>(pipe(
  tap(() => patchState(store, { loading: true })),
  switchMap(id => api.getById(id).pipe(
    tap(item => patchState(store, { current: item, loading: false }))
  ))
))

Error Handling

Errors must be handled inside the pipeline, otherwise the stream completes and the method stops working. Use catchError within the inner observable.

switchMap(id => api.getById(id).pipe(
  tap(item => patchState(store, { current: item, error: null })),
  catchError(err => {
    patchState(store, { error: err.message, loading: false });
    return EMPTY;
  })
))

Debounced Search

Compose time-based operators for search-as-you-type. The pipeline debounces and switches just like plain RxJS.

search: rxMethod<string>(pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(q => api.search(q)),
  tap(results => patchState(store, { results }))
))

Choosing The Flattening Operator

Use switchMap to cancel stale work, concatMap to queue, mergeMap for parallel, exhaustMap to ignore new calls while busy. Pick based on the desired concurrency.

Automatic Cleanup

The pipeline's subscription is tied to the store's lifecycle. When the store is destroyed (component-scoped) the stream is torn down, so there are no leaks and no manual unsubscribe.

Initializing On Creation

Combine rxMethod with the withHooks feature to trigger an initial load when the store is created.

withHooks({
  onInit(store) { store.load('initial'); }
})

Quick Check

Check your rxMethod knowledge.

Recap

You used rxMethod for async flows: call with values or signals, choose a flattening operator (switchMap to cancel stale work), track loading, handle errors with catchError, and rely on automatic subscription cleanup.

Frequently asked questions

Is the “rxMethod for Async Work” lesson free?

Yes — the full text of “rxMethod for Async Work” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “rxMethod for Async Work”?

Handle async flows with rxMethod. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “rxMethod for Async Work” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy