Angular code explainers

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 { 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 { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators, ValidatorFn } from '@angular/forms';
 
interface FieldSchema {

Building dynamic reactive forms in Angular

reactive-forms dynamic-forms validation

Intermediate 8 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, computed, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

Optimistic updates with Angular signals

signals optimistic-updates state-management

Intermediate 9 steps

typescript

import { Injectable, signal, computed } from '@angular/core';
import {
  HttpInterceptorFn,
  HttpContextToken,

Tracking HTTP loading state in Angular

signals http-interceptor reference-counting

Intermediate 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 { Component, computed, inject, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';

Building a signup stepper in Angular

signals reactive-forms form-validation

Intermediate 10 steps

typescript

import { Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
 
@Directive({
  selector: '[appTrapFocus]',

Building a focus-trap directive in Angular

accessibility focus-management dom

Intermediate 9 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 {
  AsyncValidator,

How an async username validator works in Angular

async-validation reactive-forms rxjs

Intermediate 6 steps

typescript

import {
  Directive,
  Input,
  TemplateRef,

Building a structural *appUnless directive in Angular

structural-directive template-rendering dependency-injection

Intermediate 8 steps

typescript

import { inject } from '@angular/core';
import { ResolveFn, Router, ActivatedRouteSnapshot } from '@angular/router';
import { catchError, of, EMPTY } from 'rxjs';
import { Article } from './models/article';

Prefetching route data with an Angular resolver

route-resolver dependency-injection rxjs

Intermediate 6 steps

typescript

import { Pipe, PipeTransform, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
 
@Pipe({
  name: 'timeAgo',

A self-refreshing timeAgo pipe in Angular

impure-pipe change-detection timers

Advanced 10 steps

typescript

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { AsyncPipe } from '@angular/common';

Reactive type-ahead search in Angular

rxjs reactive-forms debounce

Intermediate 9 steps

typescript

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError, timer } from 'rxjs';
import { mergeMap, retryWhen } from 'rxjs/operators';

Exponential backoff retries in Angular

retry exponential-backoff rxjs

Advanced 7 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