Angular code explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'chunk',

A memoized chunk pipe in Angular

memoization weakmap pure-pipes

Intermediate 7 steps

typescript

import { Directive, Input, HostBinding, HostListener } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 
@Directive({

A custom range validator directive in Angular

form-validation directives accessibility

Intermediate 8 steps

typescript

import {
  Component,
  ContentChildren,
  QueryList,

Building a content-projected wizard in Angular

content-projection templateref querylist

Advanced 9 steps

typescript

import { Directive, ElementRef, HostListener, Renderer2, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@Directive({

Building a phone-mask ControlValueAccessor in Angular

directives control-value-accessor input-masking

Intermediate 8 steps

typescript

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductRecommendationsComponent } from './product-recommendations.component';

Deferred loading with @defer in Angular

lazy-loading signals standalone-components

Intermediate 8 steps

typescript

import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
 
interface Point {
  x: number;

Throttling pointer events with NgZone in Angular

change-detection requestanimationframe event-throttling

Advanced 8 steps

typescript

import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  DetachedRouteHandle,

A scroll-preserving RouteReuseStrategy in Angular

route-reuse scroll-restoration caching

Advanced 10 steps

typescript

import {
  Directive,
  ElementRef,
  EventEmitter,

An infinite-scroll directive in Angular

intersectionobserver directives performance

Advanced 7 steps

typescript

import {
  Component,
  ComponentRef,
  Injector,

Dynamic component rendering in Angular

dynamic-components viewcontainerref lifecycle-hooks

Advanced 7 steps

typescript

import { Routes } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { REPORT_API_URL } from './reports/report.tokens';

Route-scoped providers and lazy loading in Angular

routing dependency-injection lazy-loading

Intermediate 8 steps

typescript

import { Component } from '@angular/core';
import {
  AbstractControl,
  FormBuilder,

Cross-field password validation in Angular

reactive-forms custom-validators cross-field-validation

Intermediate 7 steps

typescript

import { Component, inject } from '@angular/core';
import { combineLatest, map, startWith } from 'rxjs';
import { UserStore } from './user.store';
import { CartStore } from './cart.store';

The view model pattern in Angular

rxjs view-model reactive-streams

Intermediate 6 steps

typescript

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { finalize } from 'rxjs';

A reactive signup form in Angular

reactive-forms validation dependency-injection

Intermediate 10 steps

typescript

import { Directive, ElementRef, EventEmitter, inject, NgZone, OnDestroy, Output } from '@angular/core';
 
@Directive({
  selector: '[appResizeDebounced]',

A debounced resize directive in Angular

debounce change-detection host-bindings

Advanced 7 steps

typescript

import { Directive, ElementRef, HostListener, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';

Building a tooltip directive in Angular

directives cdk-overlay hover-interaction

Intermediate 7 steps

typescript

import { Component, computed, input, model, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
interface Product {

Reactive filtering with Angular signals

signals computed two-way-binding

Intermediate 9 steps