Code Explainers

Code explainers tagged #rxjs

typescript 
import {
  CallHandler,
  ExecutionContext,
  Injectable,

Deduping in-flight requests in NestJS

interceptor request-deduplication rxjs
Advanced 6 steps
typescript 
import { Component, inject } from '@angular/core';
import { combineLatest, map, startWith } from 'rxjs';
import { UserStore } from './user.store';
import { CartStore } from './cart.store';

The view model pattern in Angular

rxjs view-model reactive-streams
Intermediate 6 steps
typescript 
import { Component, computed, DestroyRef, inject, input, output, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval, map, takeWhile } from 'rxjs';
 

How a signal-driven countdown works in Angular

signals reactivity rxjs
Intermediate 8 steps
typescript 
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, timer, throwError } from 'rxjs';
import { switchMap, takeWhile, filter, take, catchError } from 'rxjs/operators';

Polling a job until it finishes in Angular

rxjs polling observables
Intermediate 7 steps
typescript 
import { Injectable } from '@angular/core';
import { HttpClient, HttpEventType, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, distinctUntilChanged, scan } from 'rxjs/operators';

Tracking upload progress in Angular

rxjs http-events state-reduction
Intermediate 8 steps
typescript 
import { Controller, Param, Sse, MessageEvent } from '@nestjs/common';
import { Observable, interval, merge } from 'rxjs';
import { filter, map, takeWhile } from 'rxjs/operators';
import { JobService } from './job.service';

Streaming job progress with SSE in NestJS

server-sent-events reactive-streams rxjs
Intermediate 8 steps
typescript 
import {
  CallHandler,
  ExecutionContext,
  Injectable,

Recording HTTP metrics with a NestJS interceptor

interceptor observability prometheus
Intermediate 5 steps
typescript 
import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable, catchError, concatMap, finalize } from 'rxjs';
import { DataSource, QueryRunner } from 'typeorm';
 

Wrapping requests in a transaction with NestJS

interceptors transactions rxjs
Advanced 7 steps
typescript 
import { Injectable, inject } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of, Subject } from 'rxjs';
import { filter, switchMap, take } from 'rxjs/operators';

A hover-triggered preloading strategy in Angular

lazy-loading rxjs preloading
Advanced 8 steps
typescript 
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { catchError, filter, take, switchMap } from 'rxjs/operators';

Refreshing auth tokens in an Angular interceptor

http-interceptor token-refresh rxjs
Advanced 8 steps
typescript 
import {
  Injectable,
  NestInterceptor,
  ExecutionContext,

A per-route timeout interceptor in NestJS

interceptors metadata reflection rxjs
Intermediate 8 steps
typescript 
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import {
  Observable,

A city autocomplete service in Angular

rxjs observables debouncing
Intermediate 7 steps
typescript 
import { HttpService } from '@nestjs/axios';
import { Injectable, Logger, ServiceUnavailableException } from '@nestjs/common';
import { AxiosError } from 'axios';
import { catchError, firstValueFrom, retry, timer } from 'rxjs';

Resilient payment retries in NestJS

retry exponential-backoff rxjs
Advanced 8 steps
typescript 
import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder } from '@angular/forms';
import { debounceTime, map } from 'rxjs/operators';

Syncing an Angular filter form with the URL

reactive-forms query-params rxjs
Intermediate 8 steps
typescript 
import { inject } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivateFn,

How a functional route guard works in Angular

route-guards dependency-injection rxjs
Intermediate 5 steps
typescript 
import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpHandler,

Refreshing tokens with an Angular HttpInterceptor

http-interceptor token-refresh rxjs
Advanced 8 steps
typescript 
import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route, Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { Observable, of, timer } from 'rxjs';

A custom preloading strategy in Angular

lazy-loading preloading rxjs
Intermediate 7 steps
typescript 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {
  AsyncValidator,

How an async username validator works in Angular

async-validation reactive-forms rxjs
Intermediate 6 steps