Angular code explainers

typescript

import { InjectionToken, inject, Provider, isDevMode } from '@angular/core';
import { WINDOW } from './window.token';
 
export interface AnalyticsConfig {

Layered config with an Angular InjectionToken

dependency-injection configuration factory-provider

Intermediate 8 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 { Component, inject, signal } from '@angular/core';
import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs';

Drag-and-drop reordering with signals in Angular

drag-and-drop signals optimistic-update

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, signal, computed, effect, inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
 
export type Theme = 'light' | 'dark';

A signal-based theme service in Angular

signals reactivity dependency-injection

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 { Component, HostBinding, Input } from '@angular/core';
 
type ProgressVariant = 'success' | 'warning' | 'danger';

A CSS-driven progress ring in Angular

host-bindings css-custom-properties input-setters

Intermediate 8 steps

typescript

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { NgFor } from '@angular/common';

Building an active-route navbar in Angular

routing standalone-components accessibility

Intermediate 6 steps

typescript

import { Component, inject, effect } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { toSignal } from '@angular/core/rxjs-interop';

Debounced search that syncs to the URL in Angular

signals reactive-forms debouncing

Advanced 8 steps

typescript

import { Component, Input } from '@angular/core';
 
interface Order {
  id: string;

How Angular ICU plurals localize an order summary

i18n pluralization standalone-component

Intermediate 8 steps

typescript

import { Injectable, computed, effect, signal } from '@angular/core';
 
export interface CartLine {
  id: string;

A signal-based cart store in Angular

signals reactivity computed-state

Intermediate 8 steps

typescript

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RevenueChartComponent } from './revenue-chart.component';
import { ReportService, RevenueReport } from './report.service';

Deferred chart loading with @defer in Angular

lazy-loading signals dependency-injection

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 { Directive, ElementRef, HostBinding, HostListener, Input, inject, signal } from '@angular/core';
 
@Directive({
  selector: '[appCopyToClipboard]',

A copy-to-clipboard directive in Angular

directives host bindings clipboard api

Intermediate 9 steps

typescript

import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
 
interface MoneyOptions {
  currency?: string;

Building a cached money pipe in Angular

pipes memoization internationalization

Intermediate 8 steps

typescript

import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
 
interface Shortcut {
  key: string;

A keyboard shortcut directive in Angular

directives event-handling keyboard-shortcuts

Intermediate 9 steps

typescript

import { Component, computed, signal } from '@angular/core';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkScrollableModule } from '@angular/cdk/scrolling';

Paginating a CDK table with Angular signals

signals computed-state pagination

Intermediate 9 steps