angular▌

Angular 21 development with signals, standalone components, reactive patterns, and strict TypeScript typing. \n \n Use standalone components with ChangeDetectionStrategy.OnPush , input() / output() functions, and computed() for derived state instead of decorators and ngClass / ngStyle \n Manage async data with resource() for signal-based fetching, handling loading/error states via hasValue() and status checks \n Build templates with native control flow ( @if , @for , @switch ), async pipes, and

Always analyze the project's Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.

Angular Material and CDK rules for component usage, theming, and testing. Use with the core angular-best-practices skill for comprehensive Angular coverage.

Structured approach to migrating AngularJS applications to modern Angular with hybrid mode support. \n \n Three migration strategies: Big Bang (complete rewrite), Incremental (hybrid side-by-side), and Vertical Slice (feature-by-feature), each suited to different app sizes and delivery constraints \n Hybrid app setup using ngUpgrade to run AngularJS and Angular simultaneously, enabling gradual feature migration without full rewrites \n Component, service, routing, and forms migration patterns wi

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

NgRx state management rules for global state with actions, reducers, effects, and selectors. Use with the core angular-best-practices skill for comprehensive Angular coverage.

NEVER trigger reflows/repaints in lifecycle hooks (ngOnInit, ngAfterViewInit).

Comprehensive guide to modern Angular state management patterns, from Signal-based local state to global stores and server state synchronization.

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 ,

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