angular

Implements modern Angular v20+ patterns including Signals, Standalone Components, Zoneless apps, and SSR hydration.

1|Updated Aug 17, 2025
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill angular-ratnesh-maurya
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/angular
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill angular-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Modernizing Angular development is challenging because legacy patterns like NgModules, decorator-based inputs, and zone.js change detection conflict with the current Signals-first architecture. This Skill provides authoritative guidance on Angular v20+ so you avoid outdated patterns and build performant, maintainable applications from the start. ## Core Features & Use Cases - Signals & Reactivity: Implement writable signals, computed values, effects, signal inputs/outputs, and signal-based queries for fine-grained reactivity. - Modern Architecture: Build Standalone Components, enable Zoneless change detection, configure SSR with incremental hydration, and use functional guards and resolvers. - Performance & State: Apply OnPush change detection, @defer lazy loading, NgOptimizedImage, and Signal-based state stores. - Use Case: When migrating a legacy NgModule-based dashboard to modern Angular, use this Skill to convert components to standalone, replace @Input decorators with signal inputs, and enable zoneless mode safely. ## Quick Start Ask the AI to refactor an Angular component to use Signals and Standalone architecture following modern v20+ best practices.

Frequently Asked Questions about angular

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Signals in Angular for state management?

Create writable signals with signal(), derive values with computed(), and run side effects with effect(). For shared state, build a service exposing private writable signals and public readonly computed values, updating state through explicit action methods.

When should I use Signals vs RxJS in Angular?

Use Signals for local component state, derived values, and side effects. Use RxJS for HTTP requests via HttpClient, event streams, and complex async flows requiring operators like switchMap or mergeMap.

How do I enable Zoneless change detection in Angular?

Add provideZonelessChangeDetection() to the providers array in bootstrapApplication. Combine it with OnPush change detection and Signals so updates trigger rendering without zone.js patching async APIs.

Does Angular SSR support incremental hydration?

Yes, Angular v20+ supports incremental hydration using @defer blocks with hydrate triggers like on viewport, on interaction, on idle, or on timer. Enable it with provideClientHydration(withEventReplay()) in the app config.

Why is my Angular Signal not updating the UI?

Signals must be called as functions in templates, like count(), and the component should use OnPush change detection. In zoneless apps, updates must go through signal set or update calls rather than mutating objects directly.

When should I not use this modern Angular approach?

Avoid it for AngularJS 1.x migrations, which need a dedicated migration path, and for legacy apps that cannot upgrade. Gradual migration is recommended over big-bang rewrites for existing codebases.