#observables code explainers

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 { 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, inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

A reusable confirmation dialog service in Angular

dependency-injection observables dialog

Intermediate 6 steps

typescript

import { Injectable } from '@angular/core';
import { CanDeactivateFn } from '@angular/router';
import { inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

Guarding navigation with CanDeactivate in Angular

route-guards functional-guards dependency-injection

Intermediate 7 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 { inject } from '@angular/core';
import {
  CanActivateFn,
  Router,

Functional route guards in Angular

route-guards dependency-injection observables

Intermediate 5 steps

typescript

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, shareReplay } from 'rxjs';

Caching HTTP config in an Angular service

caching observables dependency-injection

Intermediate 6 steps

typescript

import {
  Injectable,
  NestInterceptor,
  ExecutionContext,

How a NestJS logging interceptor works

interceptors rxjs logging

Intermediate 5 steps