angular-routing
🎯Skillfrom analogjs/angular-skills
|Provides AI-assisted guidance for implementing modern Angular routing with lazy loading, functional guards/resolvers, and signal-based route parameters.
Installation
npx skills add https://github.com/analogjs/angular-skills --skill angular-routingSkill Details
Overview
# Angular Skills
A collection of skills for AI-assisted Angular development. These skills provide coding agents such as Claude, Gemini, OpenCode, etc with up-to-date Angular v20+ patterns, best practices, and code examples.
Installation
Install all skills from this repository:
```bash
npx skills add analogjs/angular-skills
```
Or install individual skills:
```bash
npx skills add analogjs/angular-skills/skills/angular-component
npx skills add analogjs/angular-skills/skills/angular-signals
npx skills add analogjs/angular-skills/skills/angular-forms
# etc.
```
Give the GitHub repo a ⭐️!
Available Skills
| Skill | Description |
|-------|-------------|
| [angular-component](skills/angular-component) | Standalone components with signal inputs/outputs, OnPush change detection, host bindings, content projection, and lifecycle hooks |
| [angular-di](skills/angular-di) | Dependency injection with inject(), injection tokens, provider configuration, and hierarchical DI patterns |
| [angular-directives](skills/angular-directives) | Attribute directives, structural directives for portals/overlays, and host directive composition |
| [angular-forms](skills/angular-forms) | Signal Forms (experimental) with schema-based validation, field state management, and reactive patterns |
| [angular-http](skills/angular-http) | Data fetching with httpResource(), resource(), HttpClient, and functional interceptors |
| [angular-routing](skills/angular-routing) | Routing with lazy loading, functional guards/resolvers, and signal-based route parameters |
| [angular-signals](skills/angular-signals) | Reactive state with signal(), computed(), linkedSignal(), effect(), and RxJS interop |
| [angular-ssr](skills/angular-ssr) | Server-side rendering, incremental hydration, prerendering, and browser-only code patterns |
| [angular-testing](skills/angular-testing) | Testing with TestBed, component harnesses, signal testing, and OnPush component testing |
| [angular-tooling](skills/angular-tooling) | Angular CLI commands, code generation, build configuration, and workspace setup |
Skill Structure
Each skill follows the standard structure:
```
skills/
└── angular-{name}/
├── SKILL.md # Main skill file with patterns and examples
└── references/
└── {name}-patterns.md # Advanced patterns and additional examples
```
Angular Version
These skills target Angular v20+ with modern defaults:
- Standalone components (no
standalone: trueneeded) - Signal-based inputs, outputs, and queries
- Native control flow (
@if,@for,@switch) inject()function for dependency injection- Functional guards and interceptors
- Signal Forms (experimental)
Key Patterns
Components
```typescript
@Component({
selector: 'app-user-card',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
{{ name() }}
@if (showEmail()) {
{{ email() }}
}
`,
})
export class UserCardComponent {
name = input.required
email = input
showEmail = input(false);
selected = output
}
```
Signals
```typescript
const count = signal(0);
const doubled = computed(() => count() * 2);
effect(() => {
console.log('Count changed:', count());
});
```
Dependency Injection
```typescript
@Injectable({ providedIn: 'root' })
export class UserService {
private http = inject(HttpClient);
private config = inject(APP_CONFIG);
}
```
HTTP Resources
```typescript
userResource = httpResource/api/users/${this.userId()});
```
Signal Forms
```typescript
loginModel = signal({ email: '', password: '' });
loginForm = form(this.loginModel, (schemaPath) => {
required(schemaPath.email);
email(schemaPath.email);
required(schemaPath.password);
});
```
Contributing
Contributions are welcome! Please ensure any additions:
- Target Angular v20+ patterns
- Follow the existing skill structure
- Include practical, working c
More from this repository7
Provides guidance and code patterns for efficient data fetching in Angular using HttpClient, resource methods, functional interceptors, and modern HTTP request handling techniques.
Provides comprehensive guidance and code patterns for working with Angular's reactive signals, covering signal creation, computed values, effects, and RxJS interoperability.
Provides guidance and code patterns for creating Signal Forms in Angular with schema-based validation, field state management, and reactive form handling techniques.
Provides guidance and code examples for creating attribute and structural directives, implementing host directive composition, and building custom Angular directives with modern patterns.
Provides comprehensive guidance and code examples for Angular CLI commands, project generation, build configuration, and workspace management best practices.
Provides comprehensive guidance and code examples for testing Angular applications using TestBed, component harnesses, signal testing, and techniques for testing OnPush components.
Provides guidance and code patterns for implementing server-side rendering (SSR), incremental hydration, prerendering, and managing browser-specific code in Angular applications.