---
title: "Agent Skill to Angular 22"
platform: "Promptally"
canonical_url: "https://app.promptally.dev/p/skill-angular-22"
modality: "SKILL"
category: "Fullstack & Backend Engineering"
compatible_models: [Universal / Model Agnostic]
access_tier: "Free Public Artifact (No Auth Required)"
license: "MIT"
---

# Agent Skill to Angular 22

**Summary:** Agent Skill to Angular 22 is a verified SKILL blueprint on Promptally in Fullstack & Backend Engineering optimized for leading AI models. Angular 22+ modern architecture: Zoneless apps, Signals-first state, Control Flow, LinkedSignal, and Resource API. Use when the app targets Angular 22+ or uses cutting-edge reactivity and async resources. Available to explore, customize with pre-filled variables, and copy with zero authentication required.

## Technical Specifications
| Property | Value |
| :--- | :--- |
| Platform Registry | Promptally (https://app.promptally.dev) |
| Modality | SKILL |
| Category | Fullstack & Backend Engineering |
| Compatible Engines | Universal / Model Agnostic |
| Dynamic Variables | None (Static Blueprint) |
| Approx. Token Length | 738 |
| Access Tier | Free Public Artifact (No Auth Required) |
| License | MIT |

### Pre-Filled Template & Production Source

````md
---
name: angular-22
description: 'Angular 22+ modern architecture: Zoneless apps, Signals-first state, Control Flow, LinkedSignal, and Resource API. Use when the app targets Angular 22+ or uses cutting-edge reactivity and async resources.'
version: 22.0.0
last_updated: 2026-08-01
---

# 🅰️ Angular 22+ Engineering Guide

This skill provides expert patterns for developing modern Angular applications using modern Signals, Zoneless change detection, and standalone components.

## 🚀 Core Architectural Rules

### 1. Zoneless Change Detection
All Angular 22+ apps must be bootstrapped without Zone.js:
```typescript
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes),
    provideHttpClient()
  ]
};
```

### 2. Signals-First State Management
- Prefer native Signals (`signal()`, `computed()`, `linkedSignal()`) over RxJS BehaviorSubjects.
- Use `linkedSignal()` to create signals that automatically reset or derive default state when a source signal changes:
```typescript
import { signal, computed, linkedSignal } from '@angular/core';

// Primary input signal
const selectedCategoryId = signal<string>('cat-1');

// Derived signal linked to category changes
const selectedItemId = linkedSignal({
  source: selectedCategoryId,
  computation: (catId) => defaultItemIdForCategory(catId)
});
```

### 3. Async Resource API (`resource` / `rxResource`)
Use Angular's native `resource()` API for async data fetching without RxJS subscriptions or async pipes:
```typescript
import { resource } from '@angular/core';

export class UserProfileComponent {
  userId = input.required<string>();

  userResource = resource({
    request: () => ({ id: this.userId() }),
    loader: async ({ request, abortSignal }) => {
      const res = await fetch(`/api/users/${request.id}`, { signal: abortSignal });
      return await res.json();
    }
  });

  // Accessing values:
  // userResource.value()
  // userResource.isLoading()
  // userResource.error()
}
```

### 4. Modern Control Flow & Signal Inputs
Use native block syntax and signal inputs:
```html
@if (userResource.isLoading()) {
  <app-spinner />
} @else if (userResource.value(); as user) {
  <div class="user-card">
    <h2>{{ user.name }}</h2>
    @for (role of user.roles; track role.id) {
      <span class="badge">{{ role.name }}</span>
    } @empty {
      <p>No roles assigned</p>
    }
  </div>
}
```

### 5. Signal Inputs, Outputs, and Models
```typescript
@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="value.set(value() + 1)">Count: {{ value() }}</button>`
})
export class CounterComponent {
  // Two-way binding signal model
  value = model<number>(0);
  
  // Standard signal input
  label = input<string>('Default Label');
  
  // Signal output
  valueChange = output<number>();
}
```

````

## Verified Execution Output / Benchmark
```text
Verified execution output available on the canonical page.
```

## Related Blueprints on Promptally
- [Agent Skill to Knowledge Ops](https://app.promptally.dev/p/skill-knowledge-ops)
- [Agent Skill to Content Hash Cache Pattern](https://app.promptally.dev/p/skill-content-hash-cache-pattern)
- [Agent Skill to Ck](https://app.promptally.dev/p/skill-ck)
- [Agent Skill to Swift Protocol Di Testing](https://app.promptally.dev/p/skill-swift-protocol-di-testing)
- [Agent Skill to Prisma Patterns](https://app.promptally.dev/p/skill-prisma-patterns)
- [Agent Skill to Agentic Engineering](https://app.promptally.dev/p/skill-agentic-engineering)
- [Agent Skill to Python Patterns](https://app.promptally.dev/p/skill-python-patterns)
- [Agent Skill to Docs Governance](https://app.promptally.dev/p/skill-docs-governance)