Angular Developer Skill (v20)
Purpose
This skill provides comprehensive Angular v20 reference documentation scraped directly from the official v20.angular.dev docs. Use it for any Angular development task — writing components, debugging, architecting features, optimizing performance, or following best practices.
How to Use
When the user is working on an Angular task, identify which topic applies and read the corresponding reference file before responding. Multiple reference files may apply to a single task — read all relevant ones.
Reference Files
All reference files are located in references/ relative to this SKILL.md.
In-depth Guides
| Topic | File | When to read |
|---|---|---|
| Signals — Overview | references/signals/overview.md | signal(), computed(), effect(), untracked(), equality functions, OnPush integration |
| Signals — linkedSignal | references/signals/linked-signal.md | linkedSignal(), dependent writable state, source+computation form, previous value |
| Signals — resource | references/signals/resource.md | resource(), async reactivity, params, loader, abort, reload, ResourceStatus, httpResource |
| Components — Overview | references/components/overview.md | Component anatomy, @Component decorator, metadata, standalone components, imports, host element, view, component tree |
| Components — Selectors | references/components/selectors.md | Type/attribute/class selectors, :not, combining selectors, selector prefixes, attribute selector use-cases |
| Components — Styling | references/components/styling.md | Inline vs file styles, ViewEncapsulation (Emulated/ShadowDom/None), :host, ::ng-deep, <style> in templates, external style refs |
| Components — Inputs | references/components/inputs.md | Signal input(), input.required(), transforms, aliases, model() for two-way, @Input decorator, getters/setters |
| Components — Outputs | references/components/outputs.md | Signal output(), emitting data, aliases, programmatic subscribe, @Output/EventEmitter |
| Components — Content Projection | references/components/content-projection.md | <ng-content>, multiple slots with select, fallback content, ngProjectAs |
| Components — Host Elements | references/components/host-elements.md | host property, attribute/class/style/event bindings, @HostBinding/@HostListener, binding collisions, CSS custom properties, HostAttributeToken |
| Components — Lifecycle | references/components/lifecycle.md | All lifecycle hooks order and details, ngOnChanges/SimpleChanges, DestroyRef, afterNextRender/afterEveryRender phases |
| Components — Queries | references/components/queries.md | viewChild/viewChildren, contentChild/contentChildren, required queries, locators, read option, descendants, @ViewChild/@ContentChild/QueryList |
| Components — DOM APIs | references/components/dom-apis.md | ElementRef, render callbacks, Renderer2, when/when-not to use DOM APIs, XSS risk of innerHTML |
| Components — Inheritance | references/components/inheritance.md | Extending components/directives, inherited metadata, forwarding DI deps, overriding lifecycle methods |
| Components — Programmatic Rendering | references/components/programmatic-rendering.md | NgComponentOutlet, ViewContainerRef.createComponent, lazy-loading, inputBinding/outputBinding/twoWayBinding, popup pattern with createComponent + hostElement |
| Components — Advanced Config | references/components/advanced-configuration.md | ChangeDetectionStrategy.OnPush, preserveWhitespaces, CUSTOM_ELEMENTS_SCHEMA |
| Components — Custom Elements | references/components/elements.md | @angular/elements, createCustomElement(), input→attribute mapping, output→custom event, typings with NgElement/WithProperties |
| Templates — Overview | references/templates/overview.md | Template syntax overview, differences from HTML, what topics templates cover |
| Templates — Binding | references/templates/binding.md | Text interpolation {{ }}, property [], attribute [attr.], CSS class/style bindings, signal-based updates |
| Templates — Event Listeners | references/templates/event-listeners.md | (event) syntax, $event, key modifiers, preventDefault, custom event plugins via EVENT_MANAGER_PLUGINS |
| Templates — Two-Way Binding | references/templates/two-way-binding.md | [()] banana-in-a-box, ngModel with FormsModule, component two-way binding with model() |
| Templates — Control Flow | references/templates/control-flow.md | @if/@else if/@else, as alias, @for with track, contextual vars, @empty, @switch |
| Templates — Pipes | references/templates/pipes.md | Built-in pipes, | operator, chaining, parameters, pure vs impure, custom pipes with @Pipe decorator |
| Templates — ng-content | references/templates/ng-content.md | Content projection, <ng-content /> slot, parent→child content rendering |
| Templates — ng-template | references/templates/ng-template.md | Template fragments, TemplateRef, #ref on ng-template, NgTemplateOutlet, ViewContainerRef.createEmbeddedView, context params, structural directives |
| Templates — ng-container | references/templates/ng-container.md | Grouping without DOM nodes, NgComponentOutlet, NgTemplateOutlet, structural directives, DI injection via container |
| Templates — Variables | references/templates/variables.md | @let local vars, scope, non-reassignable, template reference vars #name, exportAs, use with queries |
| Templates — @defer | references/templates/defer.md | Deferrable views, lazy loading, @placeholder/@loading/@error, triggers (idle/viewport/interaction/hover/immediate/timer/when), prefetch, testing, SSR/HMR notes |
| Templates — Expression Syntax | references/templates/expression-syntax.md | Supported/unsupported literals, globals, operators, optional chaining quirk, no declarations, statement vs expression differences |
| Templates — Whitespace | references/templates/whitespace.md | Default whitespace collapsing, preserveWhitespaces, &ngsp; entity |
| Directives — Overview | references/directives/overview.md | Built-in directives, NgClass, NgStyle, NgModel, NgIf, NgFor (trackBy), NgSwitch, <ng-container> |
| Directives — Attribute Directives | references/directives/attribute-directives.md | Custom attribute directives, ElementRef, host event bindings, input() for passing values, NgNonBindable |
| Directives — Structural Directives | references/directives/structural-directives.md | <ng-template>, shorthand * syntax, microsyntax grammar, creating structural directives, TemplateRef/ViewContainerRef, template type guards (ngTemplateGuard_, ngTemplateContextGuard) |
| Directives — Composition API | references/directives/directive-composition-api.md | hostDirectives, including/aliasing inputs and outputs, composing directives on directives, execution order, DI with host directives |
| Directives — NgOptimizedImage | references/directives/image-optimization.md | NgOptimizedImage, ngSrc, priority, fill mode, width/height, placeholders, srcset, loaders (built-in and custom), loaderParams, LCP optimization |
| Dependency Injection — Overview | references/dependency-injection/overview.md | DI concepts, what services are, inject() function, valid injection contexts |
| Dependency Injection — Creating Services | references/dependency-injection/creating-and-using-services.md | ng generate service, @Injectable, providedIn: 'root', injecting into components and services |
| Dependency Injection — Defining Providers | references/dependency-injection/defining-dependency-providers.md | InjectionToken, useClass/useValue/useFactory/useExisting, multi, provider scopes (app/component/route), provide* library pattern |
| Dependency Injection — Injection Context | references/dependency-injection/injection-context.md | What contexts allow inject(), runInInjectionContext, assertInInjectionContext, NG0203 error |
| Dependency Injection — Hierarchical Injectors | references/dependency-injection/hierarchical-dependency-injection.md | EnvironmentInjector vs ElementInjector, resolution rules, modifiers (optional/self/skipSelf/host), providers vs viewProviders, logical template tree, use-case scenarios |
| Dependency Injection — Lightweight Tokens | references/dependency-injection/lightweight-injection-tokens.md | Token retention problem, abstract class pattern, useExisting, tree-shaking for libraries |
| Dependency Injection — DI in Action | references/dependency-injection/di-in-action.md | ElementRef for DOM access, forwardRef() for circular dependencies |
| Routing — Overview | references/routing/overview.md | What Angular Router is, the three parts of routing (routes/outlets/links), available features overview |
| Routing — Define Routes | references/routing/define-routes.md | Routes, static/parameterized/wildcard paths, provideRouter, loadComponent lazy loading, redirects, page titles, TitleStrategy, route-level providers, static data, nested/child routes |
| Routing — Outlets | references/routing/show-routes-with-outlets.md | RouterOutlet, nested outlets, named secondary outlets, outlet lifecycle events (activate/deactivate/attach/detach), routerOutletData/ROUTER_OUTLET_DATA |
| Routing — Navigation | references/routing/navigate-to-routes.md | RouterLink, absolute vs relative paths, string vs array syntax, router.navigate(), router.navigateByUrl(), relativeTo, replaceUrl |
| Routing — Read Route State | references/routing/read-route-state.md | ActivatedRoute, route snapshots, route params, query params, matrix params, RouterLinkActive, routerLinkActiveOptions, ariaCurrentWhenActive |
| Routing — Redirects | references/routing/redirecting-routes.md | redirectTo, pathMatch: 'prefix'/'full', conditional redirects with RedirectFunction |
| Routing — Guards | references/routing/route-guards.md | CanActivate, CanActivateChild, CanDeactivate, CanMatch, guard return types, UrlTree/RedirectCommand, applying guards, ng generate guard |
| Routing — Resolvers | references/routing/data-resolvers.md | ResolveFn, resolve route config, accessing data via ActivatedRoute or withComponentInputBinding, error handling (withNavigationErrorHandler, RedirectCommand), parent→child resolver data |
| Routing — Lifecycle & Events | references/routing/lifecycle-and-events.md | All router events in order, subscribing to Router.events, withDebugTracing, loading indicators, analytics, error handling patterns |
| Routing — Testing | references/routing/testing.md | RouterTestingHarness, testing route params/guards/outlets/nested routes/query params, best practices (don't mock Angular Router) |
| Routing — Common Tasks | references/routing/common-router-tasks.md | withComponentInputBinding, 404 page, link parameters array, LocationStrategy, PathLocationStrategy vs HashLocationStrategy, <base href> |
| Routing — UrlMatcher | references/routing/routing-with-urlmatcher.md | UrlMatcher, custom route matching functions, UrlSegment, posParams, use cases (social handles, version URLs) |
| Routing — Rendering Strategies | references/routing/rendering-strategies.md | CSR vs SSG vs SSR trade-offs, decision matrix, hydration overview |
| Routing — Customizing Behavior | references/routing/customizing-route-behavior.md | withRouterConfig options (canceledNavigationResolution, onSameUrlNavigation, paramsInheritanceStrategy, urlUpdateStrategy, defaultQueryParamsHandling), RouteReuseStrategy, preloading strategies, UrlHandlingStrategy, custom matchers |
| Routing — Reference | references/routing/router-reference.md | Complete router events table, all router terminology, <base href>, HashLocationStrategy |
| Routing — View Transitions | references/routing/route-transition-animations.md | withViewTransitions, View Transitions API integration, CSS animation customization, onViewTransitionCreated, skipTransition() |
| Forms — Overview | references/forms/overview.md | Choosing between reactive vs template-driven, key differences, common foundation classes (FormControl/FormGroup/FormArray/ControlValueAccessor), data flow, mutability, testing comparison |
| Forms — Reactive Forms | references/forms/reactive-forms.md | FormControl, FormGroup, FormArray, FormBuilder, setValue/patchValue, formControlName/formGroupName/formArrayName, events observable, unified state change events, type guard utilities (isFormControl etc.) |
| Forms — Typed Forms | references/forms/typed-forms.md | Strictly typed reactive forms (Angular 14+), nullability, nonNullable, explicit type params, FormRecord, UntypedFormGroup/UntypedFormControl, NonNullableFormBuilder |
| Forms — Template-Driven | references/forms/template-driven-forms.md | NgModel, NgForm, NgModelGroup, two-way binding with [(ngModel)], #ref="ngModel", control state CSS classes (ng-valid/ng-dirty/ng-touched), ngSubmit, form reset |
| Forms — Validation | references/forms/form-validation.md | Built-in validators, custom sync/async validators (ValidatorFn/AsyncValidatorFn), NG_VALIDATORS/NG_ASYNC_VALIDATORS, cross-field validation, control status CSS classes, updateOn (change/blur/submit), ngNativeValidate |
| Forms — Dynamic Forms | references/forms/dynamic-forms.md | Metadata-driven form generation, QuestionBase pattern, QuestionControlService, @switch on controlType, computed() signal for FormGroup, runtime add/remove controls |
| HTTP Client — Overview | references/http-client/overview.md | What HttpClient provides, feature summary |
| HTTP Client — Setup | references/http-client/setup.md | provideHttpClient, withFetch, withInterceptors, withInterceptorsFromDi, withRequestsMadeViaParent, withJsonpSupport, XSRF options, NgModule equivalents |
| HTTP Client — Making Requests | references/http-client/making-requests.md | GET/POST/PUT/DELETE, typed responses, responseType, params, headers, observe, progress events, error handling, timeouts, advanced fetch options (cache/priority/mode/credentials/redirect/referrer/integrity), cold Observables, best practices |
| HTTP Client — httpResource | references/http-client/http-resource.md | httpResource() reactive wrapper, signal-based status/response, response types, Zod/Valibot parse option, testing |
| HTTP Client — Interceptors | references/http-client/interceptors.md | Functional interceptors, withInterceptors, response interception, cloning requests, inject() in interceptors, HttpContextToken, synthetic responses, redirect info, DI-based interceptors |
| HTTP Client — Testing | references/http-client/testing.md | provideHttpClientTesting, HttpTestingController, expectOne/match/expectNone, flushing, error testing, testing interceptors |
| Server-Side & Hybrid Rendering — Overview | references/ssr-hydration/overview.md | Summary of SSR/SSG/CSR strategies and guide links |
| Server-Side & Hybrid Rendering — SSR | references/ssr-hydration/ssr.md | ng new --ssr, ng add @angular/ssr, RenderMode, server routing, parameterized prerendering, fallback strategies, headers/status codes, server-compatible components, DOCUMENT token, REQUEST/RESPONSE_INIT, HttpClient transfer cache, Node.js/non-Node.js server config |
| Server-Side & Hybrid Rendering — Hydration | references/ssr-hydration/hydration.md | provideClientHydration, event replay (withEventReplay), DOM constraints, ngSkipHydration, i18n hydration, app stability, third-party library issues |
| Server-Side & Hybrid Rendering — Incremental Hydration | references/ssr-hydration/incremental-hydration.md | withIncrementalHydration, hydrate triggers (on idle/viewport/interaction/hover/immediate/timer, when, never), nested blocks, @placeholder requirements |
| Testing — Overview | references/testing/overview.md | ng test, Jasmine/Karma setup, CLI config, karma.conf.js, CI testing with ChromeHeadless |
| Testing — Code Coverage | references/testing/code-coverage.md | --code-coverage, coverage reports, enforcing minimums with karma.conf.js check property |
| Testing — Services | references/testing/services.md | Testing services with/without TestBed, spies, TestBed.inject(), fakeAsync/tick, waitForAsync, HttpClientTestingModule, HttpTestingController |
| Testing — Components Basics | references/testing/components-basics.md | ComponentFixture, createComponent(), detectChanges(), nativeElement, DebugElement, By.css() |
| Testing — Components Scenarios | references/testing/components-scenarios.md | Component binding, auto change detection, dispatchEvent(), external templates, service dependencies, fakeAsync, nested components, overrideComponent, page objects, waitForAsync |
| Testing — Attribute Directives | references/testing/attribute-directives.md | Test component pattern, By.directive(), :not selector, injector access, DebugElement.properties/styles/providerTokens |
| Testing — Pipes | references/testing/pipes.md | Isolated pipe tests (no TestBed needed), DOM tests that verify pipe integration in templates |
| i18n — Overview | references/i18n/overview.md | i18n vs l10n concepts, localization workflow summary, what the full i18n pipeline looks like |
| i18n — Add Package | references/i18n/add-package.md | ng add @angular/localize, --use-at-runtime, effect on package.json and tsconfig |
| i18n — Locale IDs | references/i18n/locale-id.md | Unicode locale ID format, BCP 47, CLDR, setting sourceLocale in angular.json |
| i18n — Format Data | references/i18n/format-data-locale.md | DatePipe, CurrencyPipe, DecimalPipe, PercentPipe, LOCALE_ID, overriding locale per-pipe |
| i18n — Prepare Component | references/i18n/prepare.md | i18n attribute, i18n-{attr}, $localize, metadata format meaning|description@@id, ICU plural/select/nested expressions |
| i18n — Translation Files | references/i18n/translation-files.md | ng extract-i18n, output formats (XLIFF/JSON/ARB/XMB), creating per-locale files, XLIFF <trans-unit> structure, translating plurals/select/nested |
| i18n — Merge | references/i18n/merge.md | "localize" option in angular.json, ng build --localize, locale-specific configs, ng serve single-locale limit, i18nMissingTranslation warning levels |
| i18n — Deploy | references/i18n/deploy.md | Subdirectory per locale, subPath, Accept-Language header detection, Nginx and Apache config examples, SSR auto-redirect |
| i18n — Global Variants | references/i18n/import-global-variants.md | @angular/common/locales/global/*, manual import in main.ts, when automatic vs manual import applies |
| i18n — Custom IDs | references/i18n/manage-marked-text.md | @@ prefix for stable IDs, trade-offs vs auto-generated IDs, uniqueness requirement |
| i18n — Example App | references/i18n/example.md | Full working example with fr-CA/en-US, complete app.component.html, app.component.ts, and messages.fr.xlf |
| Animations — Enter/Leave | references/animations/overview.md | animate.enter/animate.leave (v20 new API), AnimationCallbackEvent, animationComplete(), MAX_ANIMATION_TIMEOUT, testing, legacy compatibility |
| Animations — CSS | references/animations/css.md | CSS keyframe animations, transitions, @starting-style, state/style toggling, auto-height, staggering, parallel animations, reordering lists, disabling animations, programmatic control via getAnimations() |
| Animations — Route Transitions | references/animations/route-transitions.md | View Transitions API, withViewTransitions, enableViewTransitions, CSS pseudo-elements ::view-transition-old/new, onViewTransitionCreated, skipTransition, global styles requirement |
| Drag and Drop | references/drag-drop/overview.md | CDK cdkDrag/cdkDropList, reorderable lists, transfer between lists, cdkDropListGroup, copying items (cdkDropListHasAnchor), drag handles, custom preview/placeholder, axis locking, boundaries, delay, disable, orientation (vertical/horizontal/mixed), sort predicates, CDK_DRAG_CONFIG, scrollable containers |
Best Practices
| Topic | File | When to read |
|---|---|---|
| Style Guide | references/style-guide/style-guide.md | Naming conventions, project structure, inject() preference, component/directive patterns, protected/readonly usage, event handler naming, lifecycle interfaces |
| Security | references/best-practices/security.md | XSS prevention, sanitization contexts, DomSanitizer/bypassSecurityTrust*, CSP, Trusted Types, AOT compiler security, XSRF/CSRF, XSSI |
| Accessibility | references/best-practices/accessibility.md | ARIA attribute binding (attr.), Angular Material/CDK a11y tools, native element patterns, focus management after navigation, ariaCurrentWhenActive, @defer accessibility, custom accessible components |
| Unhandled Errors | references/best-practices/error-handling.md | ErrorHandler, what Angular catches vs. doesn't, async error handling, provideBrowserGlobalErrorListeners(), SSR error listeners, TestBed error rethrowing |
| Performance — Overview | references/best-practices/performance-overview.md | Change detection fundamentals, overview of performance subtopics and tools |
| Performance — Zone Pollution | references/best-practices/zone-pollution.md | Zone.js pollution, runOutsideAngular, third-party lib init, re-entering the zone, NgZone.isInAngularZone() |
| Performance — Slow Computations | references/best-practices/slow-computations.md | Profiling with DevTools, pure pipes, memoization, avoiding repaints in lifecycle hooks |
| Performance — Skipping Subtrees | references/best-practices/skipping-subtrees.md | OnPush strategy, change detection scenarios, markForCheck, object reference mutations |
| Performance — Chrome DevTools | references/best-practices/profiling-chrome-devtools.md | enableProfiling(), Angular custom track, color coding, bootstrap/component/CD profiling |
| Performance — Zoneless | references/best-practices/zoneless.md | provideZonelessChangeDetection, removing ZoneJS, PendingTasks, OnPush compatibility, testing with whenStable() |
| Keeping Up to Date | references/updates/keeping-up-to-date.md | ng update, ng version, Angular Update Guide, changelog, version support policy |
Routing Logic
When a user asks about Angular, follow this decision tree:
- Identify the primary topic from the user's question
- Read the matching reference file(s) — multiple may apply (e.g., a form validation question may need both
forms.mdandcomponents.md) - For best practices questions, also read the relevant best practices file alongside the technical reference
- For architecture/design questions, read
style-guide.md+ the relevant technical reference(s) - Answer using the reference content — cite Angular v20 patterns, APIs, and conventions
Common Multi-File Lookups
| User's Task | Read These |
|---|---|
| Building a form component | forms/overview.md + forms/reactive-forms.md + components/inputs.md + components/outputs.md |
| Setting up authentication | routing/route-guards.md + http-client/interceptors.md |
| SSR with hydration | ssr-hydration/ssr.md + ssr-hydration/hydration.md + routing/rendering-strategies.md |
| Optimizing a slow app | best-practices/performance-overview.md + best-practices/zone-pollution.md + best-practices/slow-computations.md + best-practices/skipping-subtrees.md + signals/overview.md |
| Writing tests | testing/overview.md + testing/services.md or testing/components-basics.md + testing/components-scenarios.md as needed |
| Accessible forms | best-practices/accessibility.md + forms/overview.md + forms/form-validation.md |
| Drag-and-drop list | drag-drop/overview.md + animations/css.md (if animated) |
| Lazy loading | templates/defer.md (@defer) + routing/define-routes.md (loadComponent) |
| Security review | best-practices/security.md + http-client/interceptors.md (XSRF) |
| i18n setup | i18n/overview.md + i18n/add-package.md + i18n/prepare.md + i18n/translation-files.md + i18n/merge.md |
| i18n deploying/serving | i18n/deploy.md + i18n/import-global-variants.md |
| i18n custom IDs | i18n/manage-marked-text.md |
| Updating Angular version | updates/keeping-up-to-date.md |
| Component lifecycle | components/lifecycle.md |
| Dynamic/programmatic rendering | components/programmatic-rendering.md |
| Two-way binding / model inputs | components/inputs.md |
| Shadow DOM / style isolation | components/styling.md |
| Child queries / ViewChild | components/queries.md |
| Web Components / Angular Elements | components/elements.md |
Important Notes
- This skill targets Angular v20 — APIs and patterns are specific to this version
- Angular v20 uses standalone components by default (no NgModules for new code)
- The new
animate.enter/animate.leaveAPI replaces legacy@angular/animationsfor new components - Signals are the recommended reactivity model — prefer over plain properties and RxJS where appropriate
- When in doubt between approaches, prefer: signals > computed > effect > RxJS
