Claude-skill-registry angular-v21-development

Develop Angular v21 components, services, and directives with signals. Use when implementing standalone components, OnPush change detection, inject() function, and input()/output() functions.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/angular-v21-development" ~/.claude/skills/majiayu000-claude-skill-registry-angular-v21-development && rm -rf "$T"

manifest: skills/data/angular-v21-development/SKILL.md

Angular v21 Development

Development guide for components, services, and directives based on Angular v21 modern patterns.

When to Use This Skill

Creating new components, services, or directives
Implementing signals-based state management
Implementing Reactive Forms
Refactoring existing code to Angular v21 patterns
Using inject() function for dependency injection

When NOT to use:

Styling only →
```
tailwindcss-v4-styling
```
Page routing configuration →
```
analogjs-development
```
UI/UX design application →
```
material-design-3-expressive
```

Core Principles

Standalone First: All components are standalone (do NOT write
```
standalone: true
```
in decorator, it's default)

OnPush Detection: Always set

changeDetection: ChangeDetectionStrategy.OnPush

Signals-First: Prefer
```
signal()
```
,
```
computed()
```
,
```
effect()
```
Modern DI: Use
```
inject()
```
function instead of constructor injection
Function-Based APIs: Use
```
input()
```
/
```
output()
```
functions instead of
```
@Input()
```
/
```
@Output()
```
decorators
Host Bindings in Decorator: Use
```
host
```
object instead of
```
@HostBinding
```
/
```
@HostListener
```
Native Control Flow: Use
```
@if
```
/
```
@for
```
/
```
@switch
```
instead of
```
*ngIf
```
/
```
*ngFor
```
/
```
*ngSwitch
```
Class Binding: Use
```
[class]
```
binding instead of
```
ngClass
```
Style Binding: Use
```
[style]
```
binding instead of
```
ngStyle
```

Implementation Guidelines

Component Creation

Patterns to apply when creating components:

Set

changeDetection: ChangeDetectionStrategy.OnPush

@Component

decorator

Define inputs/outputs with
```
input()
```
/
```
output()
```
functions
Calculate derived state with
```
computed()
```
Use
```
@if
```
/
```
@for
```
/
```
@switch
```
control flow in templates

→ Details: Component Examples

Service Creation

Patterns to apply when creating services:

Use
```
@Injectable({ providedIn: 'root' })
```
for singleton
Inject dependencies with
```
inject()
```
function
Manage state with
```
signal()
```
, expose with
```
asReadonly()
```
Define derived state with
```
computed()
```
Update state with
```
set()
```
or
```
update()
```
(do NOT use
```
mutate()
```
)

→ Details: Signal Patterns

Reactive Forms

Patterns to apply when implementing forms:

Get
```
FormBuilder
```
via
```
inject()
```
Use typed forms for type safety
Get values with
```
getRawValue()
```
Add
```
ReactiveFormsModule
```
to imports

→ Details: Component Examples

Host Bindings

Host binding implementation patterns:

Do NOT use
```
@HostBinding
```
/
```
@HostListener
```
decorators
Use
```
host
```
object in
```
@Component
```
/
```
@Directive
```
decorator

→ Details: Component Examples

Image Optimization

Patterns to apply when displaying images:

Use
```
NgOptimizedImage
```
(not for inline base64 images)
Always specify
```
width
```
/
```
height
```
attributes
Add
```
priority
```
attribute for above-the-fold images

→ Details: Component Examples

Workflow

Requirement Check: Define component responsibility and inputs/outputs
TDD Red Phase: Create test cases first
TDD Green Phase: Minimal implementation to pass tests
TDD Refactor Phase: Optimize code
Pattern Verification:
- Is
```
changeDetection: ChangeDetectionStrategy.OnPush
```
  set?
- Are
```
input()
```
  /
```
output()
```
  functions used?
- Is DI done with
```
inject()
```
  function?
- Are signals (
```
signal()
```
  ,
```
computed()
```
  ) used?
Accessibility: Check ARIA attributes, keyboard navigation

Related Skills

analogjs-development: Use together when creating page components (*.page.ts)
tailwindcss-v4-styling: When styling is needed
material-design-3-expressive: When applying UI/UX design patterns

Reference Documentation

For detailed patterns and code examples, see:

Signal Patterns - Detailed signal usage
Component Examples - Various component patterns