Angular Reference

This section documents modern, standalone Angular — signals, the built-in @if / @for / @switch control flow, @defer, typed reactive forms, provideHttpClient, functional guards and interceptors, and server-side rendering with hydration — as described by the official documentation at angular.dev, which is the reference these pages are written and verified against.

This content was generated with the assistance of AI and should be verified against angular.dev before being relied on in production. Angular ships a major release roughly every six months and its APIs continue to evolve: the examples here target the current major release; where a consulted source disagrees with the current documentation, the documentation wins and the difference is noted.

This section’s bibliography lists the reference material consulted while preparing these pages.

Welcome to the Angular reference. Angular is a TypeScript-first web framework for building single-page applications: you compose the UI from components, describe each component’s view in a template, and let Angular keep the DOM in sync as state changes. This section documents modern, standalone Angular — standalone components with bootstrapApplication, inject(), signal-based inputs and queries, the built-in @if / @for / @switch control flow, @defer, typed reactive forms, provideHttpClient, functional guards and interceptors, and SSR with hydration — written and verified against angular.dev.

If you are new to Angular, start with Getting Started with Angular, then Components and Templates and Data Binding, then work down the list or jump to what you need.

What’s covered

Getting started

  • Getting Started with Angular — what Angular is as a framework, creating a workspace with the Angular CLI, bootstrapping a standalone application without an NgModule, the modern feature baseline, and the developer tooling.

  • TypeScript Essentials for Angular — the subset of TypeScript Angular relies on (types, interfaces, readonly, unions, generics, utility types), the decorators Angular uses, and the tsconfig settings it enables.

Components & templates

  • Components — the @Component decorator and its metadata, selectors and the render tree, view encapsulation and component styles, host elements, and rendering components programmatically.

  • Templates and Data Binding — interpolation and the property, attribute, class, and style bindings; event and two-way binding; and template reference variables, @let, pipes, safe navigation, and the expression rules.

  • Control Flow and @defer — the built-in @if / @for / @switch control flow, migrating from the structural directives, and @defer blocks for declarative lazy loading with placeholder, loading, and error states.

  • Directives — attribute directives with @Directive and host bindings, structural directives and the * shorthand desugaring to <ng-template>, ng-container, and the built-in attribute directives and directive composition API.

  • Pipes — the built-in pipes for formatting values in templates, parameterising and chaining them, pure vs. impure pipes and the change-detection cost, and writing a standalone custom pipe.

Communication & lifecycle

  • Component Communication — passing data with signal inputs and outputs, two-way binding via model(), reading child elements with signal and decorator queries, and projecting markup with <ng-content>.

  • Lifecycle and Change Detection — the component lifecycle hooks and their order, DestroyRef and takeUntilDestroyed() for cleanup, the render callbacks, and how change detection works with Zone.js, OnPush, signals, and zoneless mode.

Reactivity

  • Signals — signal() with set and update, computed() for derived values, effect() for side effects, linkedSignal() and resource() for writable-derived and async state, and when to use signals versus RxJS.

  • RxJS and Asynchronous Patterns — how observables extend callbacks and promises, creating observables, the operators used most in Angular, a typeahead example, unsubscribing safely, and bridging observables to signals.

Services, data & routing

  • Dependency Injection — creating and consuming services, inject() versus constructor injection and the injection context, the provider recipes and InjectionToken, and the hierarchical environment and element injectors.

  • HTTP Client — configuring HttpClient with provideHttpClient, typed requests with parameters and headers, handling errors and retrying with backoff, functional interceptors, httpResource(), and testing HTTP code.

  • Routing and Navigation — configuring the router with provideRouter, linking and navigating, reading route and query parameters, child routes and lazy loading, and functional guards and resolvers.

Forms & errors

  • Forms — template-driven and reactive forms, strictly typed FormGroup / FormArray / FormBuilder, reading and reacting to control state, synchronous, asynchronous and cross-field validation, custom controls with ControlValueAccessor, and experimental Signal Forms.

  • Error Handling — framework error codes and the error reference, a custom global ErrorHandler with provideBrowserGlobalErrorListeners(), catching HTTP errors centrally in a functional interceptor, and surfacing errors to users and a backend.

Quality & delivery

  • Testing — TestBed and ComponentFixture, DebugElement and By.css, testing components with inputs and outputs, stubbing and spying, testing services and HTTP with HttpTestingController, async testing with fakeAsync, component harnesses, coverage, and the Vitest migration.

  • Production and Performance — ng build optimizations, output hashing, bundle budgets and configurations in angular.json, environment file replacement and ng deploy, the Core Web Vitals and the Angular features that move them, NgOptimizedImage, and SSR with full and incremental hydration.

UI & ecosystem

  • Styling and UI Libraries — scoped component styles and view encapsulation, Sass, Tailwind CSS and CSS custom properties, the main free and open-source component libraries (Angular Material, PrimeNG, ng-bootstrap, NG-ZORRO, Taiga UI, spartan/ui, the CDK), the commercial suites, and accessibility.

  • Angular Material — installing Material with ng add, Material 3 theming with mat.theme, typography and dark mode, the common Material components, the Angular CDK, and the accessibility responsibilities that remain yours.

  • Ecosystem and Migration — what NgModule was and why standalone replaced it, the automated standalone and control-flow migrations, keeping an app up to date with ng update, the state-management options, and the tooling around Angular.

Reference

  • Cheat sheet — a one-page, downloadable PDF summary of the essentials above for quick memorization.

Bibliography