#observables code explainers

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