angular-patterns

Provide Angular 17+ development patterns for standalone components, signals, and control flow.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/ps-carvalho/spavn-agents --skill angular-patterns-ps-carvalho
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-patterns
Source: https://github.com/ps-carvalho/spavn-agents/tree/main/.opencode/skills/angular-patterns
Command: npx skills add https://github.com/ps-carvalho/spavn-agents --skill angular-patterns-ps-carvalho

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for building robust and maintainable applications using the latest features of Angular 17+, including standalone components, signals, and new control flow syntax.

Core Features & Use Cases

  • Standalone Components: Learn to build modular and reusable UI pieces.
  • Signals: Implement efficient, fine-grained reactivity for state management.
  • New Control Flow: Utilize the modern @if, @for, @switch, and @defer syntax for cleaner templates.
  • Dependency Injection: Understand modern DI patterns with inject().
  • RxJS Best Practices: Apply effective patterns for handling asynchronous operations.
  • Use Case: When starting a new Angular project or refactoring an existing one to leverage Angular 17+ features for improved performance and developer experience.

Quick Start

Use the angular-patterns skill to generate a new standalone Angular component with signal inputs and outputs.

Frequently Asked Questions about angular-patterns

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

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

Signals in Angular 17 provide efficient, fine-grained reactivity for state management. They allow components to track state changes without relying on RxJS subscriptions, updating the UI only when specific values change.

What is the best way to structure a modern Angular standalone components project?

Structuring an Angular project with standalone components involves building modular UI pieces without NgModules. This approach simplifies dependency injection and project organization while leveraging modern Angular 17+ features for maintainability.

How do I use the new Angular control flow syntax for templates?

The new Angular control flow syntax utilizes `@if`, `@for`, `@switch`, and `@defer` for cleaner templates. These built-in statements replace structural directives like *ngIf, improving template readability and performance.

Can I use Angular signals alongside RxJS for asynchronous operations?

Yes, you can use Angular signals alongside RxJS. Best practices involve applying effective RxJS patterns for asynchronous operations while using signals for synchronous, fine-grained state management and UI reactivity.

Does Angular 17 dependency injection support the inject() function for standalone components?

Yes, Angular 17 dependency injection supports the `inject()` function. This modern DI pattern replaces constructor injection, streamlining how standalone components and services manage dependencies.