analogjs/angular-skills▌

Unit and integration testing for Angular v20+ with Vitest or Jasmine, supporting signals and modern patterns. \n \n Supports both Vitest (recommended) and Jasmine test runners with native Angular v20+ integration via @angular/build \n Covers signal-based components, computed values, OnPush change detection, and input/output testing with modern APIs \n Includes HTTP mocking via HttpTestingController , service injection with TestBed.inject() , and dependency mocking with Vitest \n Provides pattern

Build standalone Angular v20+ components with signals, OnPush detection, and modern control flow. \n \n Signal-based inputs and outputs replace traditional @Input and @Output decorators, with support for required inputs, defaults, transforms, and computed values \n Host bindings configured via the host object enable dynamic class/style/attribute binding and event listeners without decorator syntax \n Native control flow ( @if , @for , @switch ) replaces structural directives; direct class and st

Server-side rendering, hydration, and prerendering for Angular v20+ applications. \n \n Three render modes: Prerender for static build-time HTML, Server for dynamic per-request SSR, and Client for SPA-only routes \n Incremental hydration with @defer blocks supporting viewport, interaction, idle, and conditional triggers; event replay captures user input before hydration completes \n Platform detection utilities and afterNextRender / afterRender hooks safely isolate browser-only code from server

Signal-based reactive forms for Angular v21+ with automatic two-way binding and schema-based validation. \n \n Provides type-safe form creation using writable signals as the single source of truth, with automatic field state management for validation, interaction, and availability \n Includes built-in validators (required, email, min, max, pattern) plus custom, cross-field, and async HTTP validation with conditional logic \n Supports dynamic arrays, nested objects, hidden/disabled/readonly field

Angular CLI and development tools for v20+ project setup, code generation, building, testing, and configuration. \n \n Covers project creation, component/service/directive/pipe generation, and schematic-based code scaffolding with inline templates and change detection options \n Includes development server configuration, production builds with budgets and hashing, and bundle analysis via stats-json output \n Supports unit and e2e testing, linting with auto-fix, and environment-based file replace

Dependency injection configuration and service management for Angular v20+ using inject() and providers. \n \n Use inject() for cleaner dependency declaration in components and services; configure providers at root, component, or route level to control singleton vs instance-per-component behavior \n Create and inject custom tokens for configuration objects, third-party values, and multi-provider collections; supports useValue, useClass, useFactory, and useExisting provider strategies \n Manage i

Custom directives for DOM manipulation, behavior extension, and component composition in Angular v20+. \n \n Attribute directives modify element appearance and behavior using the host property for event handling, class binding, and ARIA attributes; includes patterns for tooltips, highlights, buttons, click-outside detection, and keyboard shortcuts \n Structural directives handle portal rendering, lazy initialization, and template context injection for DOM manipulation beyond native @if , @for ,

Signal-based reactive state management for Angular v20+ with synchronous, fine-grained reactivity. \n \n Core APIs include signal() for writable state, computed() for derived state, linkedSignal() for dependent state with automatic reset, and effect() for side effects \n Integrates with RxJS via toSignal() and toObservable() for converting between observables and signals \n Supports custom equality functions, untracked reads to break dependencies, and read-only signal exposure via asReadonly() \

Signal-based HTTP data fetching with httpResource(), resource(), and HttpClient for Angular v20+. \n \n httpResource() provides reactive HTTP requests with automatic refetching when dependencies change, built-in loading/error states, and manual reload/set/update actions \n resource() handles generic async operations with conditional loading, abort signal support, and customizable default values \n Functional interceptors for authentication, error handling, and logging integrate via withIntercept

Angular v20+ routing with lazy loading, functional guards, resolvers, and signal-based route parameters. \n \n Supports lazy loading of feature modules and individual components with loadChildren and loadComponent \n Functional guards for authentication, role-based access control, and unsaved changes detection; resolvers pre-fetch data before route activation \n Route parameters and query strings bind directly to component inputs via withComponentInputBinding() , with signal-based access to Acti