angular-component

Build Angular standalone components with signals-based inputs and outputs.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/alexander-kastil/advanced-angular-agentic-swe --skill angular-component-alexander-kastil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-component
Source: https://github.com/alexander-kastil/advanced-angular-agentic-swe/tree/main/.github/skills/angular-component
Command: npx skills add https://github.com/alexander-kastil/advanced-angular-agentic-swe --skill angular-component-alexander-kastil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Angular development often requires building reusable, accessible components with signals-based inputs/outputs and precise change detection. This skill consolidates best practices for standalone components and refactoring class-based inputs to signals, ensuring maintainability and consistency across UI widgets.

Core Features & Use Cases

  • Standalone components by default (no separate standalone flag), with signals-based inputs and outputs for clear data flow.
  • Supports host bindings, content projection, computed signals, and lifecycle hooks to build robust, accessible components.
  • Includes guidance on accessibility requirements, template syntax conventions, and image handling patterns for production-ready UI.

Quick Start

Create a new Angular v20+ standalone component using signals for inputs and outputs, with a host binding and example content projection.

Frequently Asked Questions about angular-component

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

FAQPage Schema
How do I create Angular standalone components with signals for inputs and outputs?▼

To create Angular standalone components with signals, you define inputs and outputs using signal-based APIs rather than class-based decorators. This approach ensures clear data flow and precise change detection for robust UI widgets.

What is the best way to refactor class-based Angular inputs to signals?▼

Refactoring class-based Angular inputs to signals involves converting decorator-based properties to signal-based inputs and outputs. This transition maintains component maintainability while leveraging precise change detection and computed signals.

Does this approach support content projection and host bindings in Angular templates?▼

Yes, this approach supports content projection and host bindings within Angular templates. It consolidates best practices for standalone components, ensuring precise template syntax conventions and robust component structure.

How do I implement accessible interactions in Angular component templates?▼

Implementing accessible interactions in Angular templates requires following specific accessibility requirements and template syntax conventions. This ensures production-ready UI components are maintainable and usable for all users.

When do I need standalone components with signals for Angular UI widgets?▼

You need Angular standalone components with signals when building reusable, accessible UI widgets that require precise change detection. This method applies to creating new widgets or converting existing class-based inputs for better consistency.

Can I use computed signals and lifecycle hooks with Angular standalone components?▼

Yes, you can use computed signals and lifecycle hooks with Angular standalone components. This combination supports robust component patterns, guiding component structure and ensuring maintainability across UI widgets.