typescript 33 lines · 7 steps

Polling a job until it finishes in Angular

An RxJS pipeline repeatedly hits an API on a timer and completes the moment a job is done or failed.

Explained by highlit
Angular Intermediate rxjs polling observables operators dependency-injection
1import { Injectable, inject } from '@angular/core';
2import { HttpClient } from '@angular/common/http';
3import { Observable, timer, throwError } from 'rxjs';
4import { switchMap, takeWhile, filter, take, catchError } from 'rxjs/operators';
5 
6export interface Job {
7 id: string;
8 status: 'queued' | 'running' | 'complete' | 'failed';
9 result?: unknown;
10 error?: string;
11}
12 
13@Injectable({ providedIn: 'root' })
14export class JobPollingService {
15 private readonly http = inject(HttpClient);
16 private readonly intervalMs = 2000;
17 
18 pollUntilComplete(jobId: string): Observable<Job> {
19 return timer(0, this.intervalMs).pipe(
20 switchMap(() => this.http.get<Job>(`/api/jobs/${jobId}`)),
21 takeWhile(job => job.status === 'queued' || job.status === 'running', true),
22 switchMap(job => {
23 if (job.status === 'failed') {
24 return throwError(() => new Error(job.error ?? 'Job failed'));
25 }
26 return [job];
27 }),
28 filter(job => job.status === 'complete'),
29 take(1),
30 catchError(err => throwError(() => err)),
31 );
32 }
33}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1timer plus switchMap turns a schedule into a stream of fresh HTTP requests without manual loops.
  2. 2takeWhile with an inclusive flag lets you emit the final terminal value before completing the stream.
  3. 3Modeling failure as throwError keeps error handling inside the observable pipeline rather than in callbacks.

Related explainers

typescript 
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection
Intermediate 8 steps
typescript 
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';
 

Validating env config at boot in NestJS

configuration schema-validation environment-variables
Intermediate 8 steps
java 
@Component
@Converter
public class EncryptedStringConverter implements AttributeConverter<String, String> {
 

Transparent column encryption in Spring & JPA

encryption aes-gcm jpa-converter
Advanced 10 steps
typescript 
import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup
Intermediate 8 steps
java 
package com.acme.billing.config;
 
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
import org.springframework.boot.context.properties.ConfigurationProperties;

Feature-flagged beans with Spring @ConditionalOnProperty

feature-flags conditional-beans strategy-pattern
Intermediate 5 steps
typescript 
import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

Polling a job until it finishes in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code