# NG Guide

> The one-stop Angular guide. Learn Angular 22 (latest stable) from beginner to advanced: components, signals, Signal Forms, routing, HTTP, RxJS, testing with Vitest, SSR & hydration, deployment, real projects and AI-assisted development.

All code follows modern Angular 22 conventions: standalone components (no `standalone: true`), OnPush by default, `@Service()` + `inject()`, `input()`/`output()`/`model()`, signals, native control flow (`@if`, `@for`, `@switch`), Signal Forms and Vitest.

- Full content in one file: https://ng-guide.letsprogram.in/llms-full.txt
- Agent rules (AGENTS.md): https://ng-guide.letsprogram.in/AGENTS.md
- Agent skill: https://ng-guide.letsprogram.in/skills/ng-guide/SKILL.md

## Getting Started

- [Welcome & Course Overview 🚀](https://ng-guide.letsprogram.in/introduction.md): Start here — what NG Guide covers, who it is for, how the course is organised and how to get the most out of it while learning Angular 22.
- [Prerequisites & Setup 📋](https://ng-guide.letsprogram.in/prerequisites.md): What you should know before learning Angular 22 — the HTML, CSS, JavaScript and TypeScript basics, plus a quick checklist to test your setup.
- [Development Environment 🛠️](https://ng-guide.letsprogram.in/setup.md): Set up Angular 22 step by step — Node.js versions, the Angular CLI, ng new prompts and flags, the project structure, VS Code, DevTools and AI config.
- [Learning Path Guide 🗺️](https://ng-guide.letsprogram.in/learning-path.md): A structured roadmap through NG Guide — from your first component to signals, testing, SSR, deployment, real projects and AI tooling with Angular 22.

## Beginner Level

- [What is Angular? 🅰️](https://ng-guide.letsprogram.in/beginner/what-is-angular.md): What Angular is, what it includes, how it works, how it compares to React and Vue, its release cycle and when to choose it — explained for beginners.
- [Angular Architecture 🏗️](https://ng-guide.letsprogram.in/beginner/architecture.md): How an Angular 22 app fits together — components, templates, services, dependency injection, the router, signals, change detection and bootstrapping.
- [Your First Angular App 🚀](https://ng-guide.letsprogram.in/beginner/first-app.md): Build a complete task manager with Angular 22 step by step — signals, computed values, @for/@if, a child component with input() and output(), effects and Vitest tests.
- [Components Basics 🧩](https://ng-guide.letsprogram.in/beginner/components.md): Learn how Angular components work - the class, template, styles, inputs, outputs, model(), host bindings and how to compose them into an app.
- [Templates & Data Binding 🎨](https://ng-guide.letsprogram.in/beginner/templates.md): Learn Angular template syntax - interpolation, property, attribute, class, style and event binding, two-way binding, @let, pipes and control flow.
- [Directives 🎯](https://ng-guide.letsprogram.in/beginner/directives.md): Learn Angular directives - built-in attribute directives, class and style bindings, control flow instead of NgIf/NgFor, and your first custom directive.
- [Services & Dependency Injection 🔧](https://ng-guide.letsprogram.in/beginner/services.md): Learn Angular services and dependency injection - @Service(), inject(), sharing state, component-level providers and InjectionToken.
- [Routing Basics 🗺️](https://ng-guide.letsprogram.in/beginner/routing.md): Learn Angular routing - provideRouter, routes, lazy loading with loadComponent, RouterLink, route params as inputs, and functional guards.
- [Forms Introduction 📝](https://ng-guide.letsprogram.in/beginner/forms.md): Learn the three ways to build forms in Angular - Signal Forms, template-driven forms and reactive forms - and when to use each one.
- [HTTP Client 🌐](https://ng-guide.letsprogram.in/beginner/http.md): Learn to talk to servers with Angular - HttpClient, httpResource, toSignal, POST/PUT/DELETE, functional interceptors and error handling.

## Intermediate Level

- [Advanced Components 🧩](https://ng-guide.letsprogram.in/intermediate/advanced-components.md): Content projection, template fragments, dynamic components, host bindings, host directives, inheritance, styling and OnPush in Angular 22.
- [Component Communication 💬](https://ng-guide.letsprogram.in/intermediate/component-communication.md): Share data between Angular components with input(), output(), model(), signal queries, template references and signal-based services.
- [Lifecycle Hooks 🔄](https://ng-guide.letsprogram.in/intermediate/lifecycle-hooks.md): Angular component lifecycle in v22 — ngOnInit, typed ngOnChanges, DestroyRef, afterNextRender, afterEveryRender, afterRenderEffect and signal alternatives.
- [Reactive Forms 📋](https://ng-guide.letsprogram.in/intermediate/reactive-forms.md): Build strongly typed Angular reactive forms in v22 — FormControl, FormGroup, FormArray, validators, FormArrayDirective, signals interop and SignalFormControl.
- [Advanced Routing 🗺️](https://ng-guide.letsprogram.in/intermediate/advanced-routing.md): Angular 22 router in depth — lazy loading, functional guards, resolvers, RedirectCommand, route resources, router events, named outlets, scrolling and view transitions.
- [RxJS in Angular 🌊](https://ng-guide.letsprogram.in/intermediate/rxjs.md): How RxJS fits into Angular 22 — signals vs observables, toSignal, toObservable, rxResource, takeUntilDestroyed, outputFromObservable and practical patterns.
- [State Management 🗃️](https://ng-guide.letsprogram.in/intermediate/state-management.md): Manage state in Angular 22 with signals, signal-based services, resources and NgRx SignalStore — plus when you actually need a library.
- [Pipes & Custom Pipes 🔧](https://ng-guide.letsprogram.in/intermediate/pipes.md): Format values in Angular templates with built-in pipes, compose transformations and create reusable custom pipes.
- [Angular Material 🎨](https://ng-guide.letsprogram.in/intermediate/material.md): Add Angular Material to an Angular application, use standalone Material components and build accessible, themeable interfaces.

## Modern Angular

- [Standalone Components 🏗️](https://ng-guide.letsprogram.in/modern/standalone-components.md): Standalone components, directives and pipes in Angular 22 — imports, bootstrapping, lazy loading, providers, and migrating away from NgModules.
- [Angular Signals 🔄](https://ng-guide.letsprogram.in/modern/signals.md): Learn Angular signals in v22 — signal(), set/update, computed, reactive contexts, untracked, equality, asReadonly and how signals drive change detection.
- [Computed Signals ⚡](https://ng-guide.letsprogram.in/modern/computed-signals.md): Derive state with computed() in Angular 22 — lazy, memoized, read-only signals with dynamic dependencies, custom equality and real-world patterns.
- [Effects API 🎭](https://ng-guide.letsprogram.in/modern/effects.md): Run side effects with effect() and afterRenderEffect() in Angular 22 — injection context, cleanup, timing, render phases, and when NOT to use effects.
- [Linked Signals 🔗](https://ng-guide.letsprogram.in/modern/linked-signals.md): linkedSignal() in Angular 22 — writable state that resets from a source, previous values, custom equality, and the custom set option added in v22.1.
- [Resource API 🧪](https://ng-guide.letsprogram.in/modern/resource-api.md): Load async data with resource() and rxResource() in Angular 22 — params, loader, status, chaining, streaming, SSR caching and snapshots. Stable since v22.
- [HttpResource API 🌐](https://ng-guide.letsprogram.in/modern/http-resource-api.md): Fetch data reactively with httpResource() in Angular 22 — URLs and request objects, typing and parsing, status signals, response types, progress, SSR and testing.
- [Signal Forms 📝](https://ng-guide.letsprogram.in/modern/signal-forms.md): Build type-safe, reactive Angular 22 forms from signal models with FormField, schema validation, dynamic arrays, custom controls and asynchronous submission.
- [Template Control Flow (@if, @for, @switch) 🔄](https://ng-guide.letsprogram.in/modern/control-flow.md): Render conditional and repeated template content with Angular's built-in control-flow blocks.
- [Template Syntax and @let 📝](https://ng-guide.letsprogram.in/modern/template-syntax.md): Use Angular template expressions, bindings, event handlers and @let local variables clearly and safely.
- [Zoneless Angular ⚡](https://ng-guide.letsprogram.in/modern/zoneless.md): Learn how Angular schedules rendering without Zone.js, what notifications trigger updates, how to migrate and how zoneless affects SSR and tests.
- [Incremental Hydration 💧](https://ng-guide.letsprogram.in/modern/incremental-hydration.md): Defer client-side hydration of server-rendered Angular content until it is needed, using hydration triggers in @defer blocks.

## Advanced Topics

- [Custom Directives 🎯](https://ng-guide.letsprogram.in/advanced/custom-directives.md): Build attribute and structural directives in Angular 22 with host metadata, signal inputs, typed template contexts and the directive composition API.
- [Dynamic Components 🔄](https://ng-guide.letsprogram.in/advanced/dynamic-components.md): Render components chosen at runtime in Angular 22 with @defer, NgComponentOutlet, ViewContainerRef.createComponent, createComponent() and the bindings API.
- [Content Projection 📤](https://ng-guide.letsprogram.in/advanced/content-projection.md): Build flexible Angular components with ng-content slots, fallback content, ngProjectAs, content queries, ng-template and ngTemplateOutlet.
- [Advanced DI Patterns 🔧](https://ng-guide.letsprogram.in/advanced/dependency-injection.md): Master Angular 22 dependency injection with @Service, injectAsync, InjectionToken, provider types, hierarchical injectors, resolution modifiers and initializers.
- [Custom Decorators 🏷️](https://ng-guide.letsprogram.in/advanced/decorators.md): How decorators work in Angular 22, which built-in decorators are replaced by functions, and how to write safe custom method and class decorators.
- [Angular Elements 🧩](https://ng-guide.letsprogram.in/advanced/elements.md): Turn Angular components into framework-agnostic custom elements (Web Components) with createApplication and createCustomElement in Angular 22.
- [Micro Frontends 🏗️](https://ng-guide.letsprogram.in/advanced/micro-frontends.md): Build scalable micro frontend architectures with Angular - Module Federation and independent deployments
- [Performance Optimization ⚡](https://ng-guide.letsprogram.in/advanced/performance.md): Measure Angular performance and improve loading, rendering, images and large-list behavior without premature optimization.
- [Memory Management 🧠](https://ng-guide.letsprogram.in/advanced/memory-management.md): Prevent memory leaks and manage memory effectively in Angular applications
- [Bundle Optimization 📦](https://ng-guide.letsprogram.in/advanced/bundle-optimization.md): Reduce bundle sizes and optimize Angular applications for production deployment

## RxJS for Angular

- [RxJS Fundamentals 🔄](https://ng-guide.letsprogram.in/rxjs/fundamentals.md): Learn RxJS from zero for Angular 22 - streams, Observables, operators, subscriptions, and how RxJS fits next to signals.
- [Observables & Observers 📡](https://ng-guide.letsprogram.in/rxjs/observables.md): Understand RxJS Observables, Observers and Subscriptions in depth - the contract, teardown, sync vs async, hot vs cold, and wrapping browser APIs.
- [Subjects & BehaviorSubject 📢](https://ng-guide.letsprogram.in/rxjs/subjects.md): Learn RxJS Subjects, BehaviorSubject, ReplaySubject and AsyncSubject, plus share/shareReplay, and when to use signals instead in Angular 22.
- [Transformation Operators 🔄](https://ng-guide.letsprogram.in/rxjs/transformation-operators.md): RxJS transformation operators for Angular - map, scan, reduce, pairwise, buffer, groupBy, expand, and an intro to switchMap, mergeMap, concatMap, exhaustMap.
- [Filtering Operators 🔍](https://ng-guide.letsprogram.in/rxjs/filtering-operators.md): RxJS filtering operators for Angular - filter, take, first, skip, distinctUntilChanged, debounceTime, throttleTime, auditTime and takeUntil, with real examples.
- [Combination Operators 🔗](https://ng-guide.letsprogram.in/rxjs/combination-operators.md): Combine RxJS streams in Angular - combineLatest, forkJoin, merge, concat, zip, race, withLatestFrom, startWith - and when computed() signals are simpler.
- [Error Handling ⚠️](https://ng-guide.letsprogram.in/rxjs/error-handling.md): Handle RxJS errors in Angular 22 - catchError placement, retry with backoff, timeout, finalize, HttpErrorResponse, interceptors, and errors with toSignal and rxResource.
- [Higher-Order Observables 🎯](https://ng-guide.letsprogram.in/rxjs/higher-order-observables.md): Deep dive into switchMap, mergeMap, concatMap and exhaustMap - timelines, concurrency, inner error handling and real Angular examples for search, uploads, saves and logins.
- [Schedulers & Testing 🧪](https://ng-guide.letsprogram.in/rxjs/schedulers.md): Understand RxJS schedulers and test async RxJS code in Angular 22 with Vitest - marble testing with TestScheduler, vi fake timers, and TestBed component tests.
- [RxJS Patterns in Angular 🎨](https://ng-guide.letsprogram.in/rxjs/angular-patterns.md): Master common RxJS patterns and best practices for Angular development

## Testing & Quality

- [Unit Testing with Vitest 🧪](https://ng-guide.letsprogram.in/testing/unit-testing.md): Write and run Angular unit tests with Vitest and ng test — setup, Vitest basics, TestBed, browser mode, configuration, CI, and migrating from Karma/Jasmine.
- [Component Testing 🧩](https://ng-guide.letsprogram.in/testing/component-testing.md): Test Angular components with Vitest and TestBed, set signal inputs, interact with templates and verify user-visible behavior.
- [Service Testing 🧰](https://ng-guide.letsprogram.in/testing/service-testing.md): Test Angular services with Vitest and TestBed, replace injected dependencies and verify HttpClient requests with HttpTestingController.
- [Integration Testing 🔗](https://ng-guide.letsprogram.in/testing/integration-testing.md): Test Angular features combining routing, forms, HTTP and dependency injection using Vitest, TestBed and RouterTestingHarness.
- [E2E Testing with Playwright 🎭](https://ng-guide.letsprogram.in/testing/e2e-testing.md): Test Angular applications in real browsers with Playwright, accessible locators, isolated test data, network mocking and CI.
- [Testing Signals 📡](https://ng-guide.letsprogram.in/testing/testing-signals.md): Test Angular signals, computed values, effects, resources and Signal Forms with Vitest and Angular's TestBed utilities.
- [Mocking & Spies 🎭](https://ng-guide.letsprogram.in/testing/mocking.md): Use Vitest mocks and Angular provider overrides to replace dependencies, spy on behavior, fake timers and isolate Angular tests.
- [Code Coverage 📊](https://ng-guide.letsprogram.in/testing/coverage.md): Measure Angular unit-test coverage with the Vitest builder, understand reports and set useful coverage thresholds in CI.

## Server-Side Rendering

- [Server-Side Rendering (SSR) 🌐](https://ng-guide.letsprogram.in/ssr/introduction.md): Learn Angular SSR with @angular/ssr - CSR vs SSR vs SSG, setup, generated files, browser-only code, data transfer, security and deployment.
- [Route-level Render Modes 🎯](https://ng-guide.letsprogram.in/ssr/render-modes.md): Configure server routes in Angular - RenderMode.Server, Prerender and Client, getPrerenderParams, fallbacks, headers, status codes and redirects.
- [Static Site Generation (SSG) 📄](https://ng-guide.letsprogram.in/ssr/static-generation.md): Prerender Angular pages at build time - outputMode static, getPrerenderParams, SEO tags, build output and deploying to static hosting or a CDN.
- [Hydration 💧](https://ng-guide.letsprogram.in/ssr/hydration.md): How Angular hydration reuses server-rendered HTML - provideClientHydration, HTTP transfer cache, incremental hydration, ngSkipHydration and fixing NG05xx errors.
- [Event Replay 🖱️](https://ng-guide.letsprogram.in/ssr/event-replay.md): Understand Angular event replay during SSR and hydration, when it is enabled, how it works with incremental hydration and how to verify it.

## Deployment & Production

- [Deployment Strategies 🚀](https://ng-guide.letsprogram.in/deployment/strategies.md): Deploy Angular 22 apps — build output, static hosts (Firebase, Netlify, Vercel, GitHub Pages, Cloudflare), Node SSR, environments, base href and ng deploy.
- [Docker & Containers 🐳](https://ng-guide.letsprogram.in/deployment/docker.md): Containerize Angular 22 apps — multi-stage Dockerfiles for static (nginx) and SSR (Node 24) builds, dev containers, PORT, allowed hosts and Kubernetes.
- [CI/CD Pipelines ⚙️](https://ng-guide.letsprogram.in/deployment/ci-cd.md): Automate Angular 22 builds — GitHub Actions with Node 24, npm ci, Vitest unit tests, Playwright e2e, production build and deploy, plus GitLab, Azure and Jenkins.

## Projects

- [Todo App with Signals ✅](https://ng-guide.letsprogram.in/projects/todo-app.md): Build a complete Angular 22 todo app step by step with signals, an @Service store, Signal Forms, route-based filters, localStorage and Vitest tests.
- [Blog Platform - Part 1 (Setup & Data) 📝](https://ng-guide.letsprogram.in/projects/blog.md): Start a 3-part Angular 22 blog project. Set up Tailwind CSS, a fake REST API with json-server, typed models, a service, and your first httpResource page.
- [Blog Platform - Part 2 (Components) 🧩](https://ng-guide.letsprogram.in/projects/blog-part2.md): Build reusable post cards, a search box, category filters and pagination for the Angular 22 blog, with all list state stored in URL query params.
- [Blog Platform - Part 3 (Pages & Forms) ✍️](https://ng-guide.letsprogram.in/projects/blog-part3.md): Finish the Angular 22 blog with a post page, a create/edit form built with Signal Forms, delete, an unsaved-changes guard, route titles, and Vitest tests.
- [Real-time Chat App 💬](https://ng-guide.letsprogram.in/projects/chat-app.md): Build an Angular 22 chat interface with signals, optimistic messages, a typed API boundary, accessible controls and a mock reply service.
- [Admin Dashboard 📊](https://ng-guide.letsprogram.in/projects/dashboard.md): Build an Angular 22 dashboard with a typed API, httpResource, signal-derived KPIs, accessible tables, responsive cards and lazy widgets.
- [E-commerce Store 🛒](https://ng-guide.letsprogram.in/projects/ecommerce.md): Build a small Angular 22 store with routes, reactive product data, a signal cart, checkout validation and an SSR-ready architecture.
- [Progressive Web App 📱](https://ng-guide.letsprogram.in/projects/pwa.md): Turn an Angular 22 app into a progressive web app with the service worker, asset and data caching, update notifications and offline UX.
- [Mobile Apps with Angular 📱](https://ng-guide.letsprogram.in/projects/mobile.md): Choose between a responsive PWA and an Ionic/Capacitor mobile app, and learn what Angular can share across web and native projects.

## Migration Guides

- [Version Upgrade Guide 🔄](https://ng-guide.letsprogram.in/migration/version-upgrade.md): Upgrade to Angular 22 with ng update — requirements, every v21→v22 and v20→v21 breaking change, automatic migrations, and the version support table.
- [Standalone Migration 📦](https://ng-guide.letsprogram.in/migration/standalone.md): Migrate NgModule-based Angular apps to standalone components with ng g @angular/core:standalone, replace CommonModule, and move providers to app.config.ts.
- [Signals Migration 🔄](https://ng-guide.letsprogram.in/migration/signals.md): Migrate to signals in Angular 22 — schematics for input(), output(), signal queries and inject(), plus patterns for replacing BehaviorSubject, async pipe and ngOnChanges.
- [Codebase Modernization 🚀](https://ng-guide.letsprogram.in/migration/modernization.md): A phased guide to modernizing legacy Angular codebases for Angular 22

## Angular + AI

- [Angular + AI 🤖](https://ng-guide.letsprogram.in/ai/overview.md): How Angular 22 works with AI — build AI-powered features into your apps, and develop Angular faster with AI assistants, MCP, rules files and skills.
- [Build AI Features 🧠](https://ng-guide.letsprogram.in/ai/build-ai-features.md): Add LLM-powered features to Angular 22 apps safely — server endpoints, streaming responses with resource and signals, a chat UI, structured output, Genkit and Firebase AI Logic.
- [Angular MCP Server 🔌](https://ng-guide.letsprogram.in/ai/mcp-server.md): Set up the Angular CLI MCP server (ng mcp) for VS Code Copilot, Cursor, Claude Code, Gemini CLI, JetBrains, Codex and Antigravity, and learn every tool it provides.
- [AI Config, Rules & Skills 📜](https://ng-guide.letsprogram.in/ai/ai-config-and-skills.md): Generate AGENTS.md, CLAUDE.md or GEMINI.md and MCP config with ng generate ai-config, customise Angular rules files, install agent skills and use the Angular AI tutor.
- [WebMCP Tools 🧰](https://ng-guide.letsprogram.in/ai/webmcp.md): Expose Angular app features as tools for in-browser AI agents with experimental WebMCP APIs — provideExperimentalWebMcpTools, declareExperimentalWebMcpTool and Signal Forms.
- [AI Runtime Debugging 🔍](https://ng-guide.letsprogram.in/ai/ai-debugging.md): How Angular 22 exposes in-page AI debugging tools (angular:di_graph and angular:signal_graph) in dev mode, and how AI agents use them through Chrome DevTools for agents.
- [Prompting Best Practices ✍️](https://ng-guide.letsprogram.in/ai/prompting-best-practices.md): Get more reliable Angular 22 code from Copilot, Cursor, Claude Code and other coding agents with specific prompts, project context and a review checklist.
- [Use NG Guide with AI 🧭](https://ng-guide.letsprogram.in/ai/use-ng-guide-with-ai.md): Give coding agents and chat assistants accurate Angular 22 guidance with NG Guide's llms.txt, per-page Markdown, AGENTS.md rules and downloadable agent skill.

## Developer Tools

- [Angular CLI ⚙️](https://ng-guide.letsprogram.in/tools/angular-cli.md): Learn the Angular 22 CLI — ng new, ng generate, ng serve, ng build, ng test (Vitest), ng update, ng add, ng mcp and angular.json essentials.
- [VS Code Setup 💻](https://ng-guide.letsprogram.in/tools/vscode.md): Set up VS Code for Angular 22 — Angular Language Service (inlay hints, outline, inline styles), recommended extensions, debugging and Copilot with the Angular MCP server.
- [Angular DevTools 🔍](https://ng-guide.letsprogram.in/tools/devtools.md): Use Angular DevTools to inspect components, debug the signal graph, profile change detection, explore injectors and routes, and jump in from Chrome's Performance panel.
- [Debugging Angular Apps 🐛](https://ng-guide.letsprogram.in/tools/debugging.md): Debug Angular 22 apps with browser DevTools, ng.* console utilities, NG error codes, provideStabilityDebugging, AI runtime tools, source maps and Vitest debugging.
- [ESLint for Angular 📐](https://ng-guide.letsprogram.in/tools/eslint.md): Add angular-eslint to an Angular 22 project with ng add, understand the flat eslint.config.js, enable modern Angular rules and run ng lint locally and in CI.
- [Prettier Code Formatting 🎨](https://ng-guide.letsprogram.in/tools/prettier.md): How Prettier works in Angular 22 projects — the generated .prettierrc, Angular template formatting, automatic formatting by the CLI, editor, ESLint and CI setup.
- [Angular Schematics 🏭](https://ng-guide.letsprogram.in/tools/schematics.md): Automate code generation and project transformations with Angular schematics
- [Git Hooks & Automation 🪝](https://ng-guide.letsprogram.in/tools/git-hooks.md): Automate code quality checks with Git hooks in Angular projects

## Resources

- [Angular Best Practices ✅](https://ng-guide.letsprogram.in/resources/best-practices.md): The definitive Angular 22 best practices — components, signals, DI with @Service, control flow, Signal Forms, routing, HTTP, a11y, security and testing.
- [Angular Design Patterns 🏗️](https://ng-guide.letsprogram.in/resources/patterns.md): Proven design patterns for Angular 22 — container/presentational, facade, signal store, adapter, strategy via DI, composition, interceptors and more.
- [Angular Cheat Sheet ⚡](https://ng-guide.letsprogram.in/resources/cheat-sheet.md): A practical Angular 22 quick reference for CLI commands, components, signals, templates, DI, routing, HTTP, Signal Forms, testing and SSR.
- [Performance Checklist ⚡](https://ng-guide.letsprogram.in/resources/performance-checklist.md): A practical Angular performance checklist focused on Core Web Vitals, production measurements, rendering, bundles and network behavior.
- [Troubleshooting Guide 🔧](https://ng-guide.letsprogram.in/resources/troubleshooting.md): Solutions to common Angular development issues and error messages
- [Community Resources 🌟](https://ng-guide.letsprogram.in/resources/community.md): Angular community resources, links, and learning materials
- [Further Reading 📚](https://ng-guide.letsprogram.in/resources/further-reading.md): Recommended books, articles, and resources for deepening your Angular knowledge