Angular code explainers

typescript

import { Component } from '@angular/core';
import {
  trigger,
  transition,

Staggered list animations in Angular

animations stagger enter-leave

Intermediate 10 steps

typescript

import { Component, input, computed } from '@angular/core';
 
function toNumber(value: number | string): number {
  return typeof value === 'number' ? value : parseFloat(value);

Signal inputs and computed in Angular

signals reactivity derived-state

Intermediate 5 steps

typescript

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
 
interface SignupModel {

How template-driven forms validate in Angular

forms two-way-binding validation

Intermediate 9 steps

typescript

import { Injectable, signal, computed } from '@angular/core';
 
export type ToastKind = 'success' | 'error' | 'info' | 'warning';

Building a signal-based toast service in Angular

signals state-management dependency-injection

Intermediate 8 steps

typescript

import { Component, ChangeDetectionStrategy } from '@angular/core';
 
@Component({
  selector: 'app-card',

Multi-slot content projection in Angular

content-projection components templates

Intermediate 7 steps

typescript

import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { toObservable } from '@angular/core/rxjs-interop';

Virtual scrolling a contact list in Angular

virtual-scrolling signals change-detection

Intermediate 6 steps

typescript

@Component({
  selector: 'app-article-editor',
  templateUrl: './article-editor.component.html',
})

Autosaving a form with RxJS in Angular

reactive-forms rxjs-operators debouncing

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 } 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 { 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