angular-component

Generate Angular standalone components with signal-based inputs and outputs.

Updated Feb 4, 2026
One-click install
npx skills add https://github.com/quantruong158/angular-chat-template --skill angular-component-quantruong158
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-component
Source: https://github.com/quantruong158/angular-chat-template/tree/main/.opencode/skills/angular-component
Command: npx skills add https://github.com/quantruong158/angular-chat-template --skill angular-component-quantruong158

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of modern, standalone Angular components, ensuring adherence to the latest best practices and improving code quality and maintainability.

Core Features & Use Cases

  • Standalone Components: Generates components that are standalone by default, simplifying module management.
  • Signal-Based Inputs/Outputs: Utilizes Angular signals for efficient and reactive data flow.
  • Host Bindings & Content Projection: Provides clear examples for managing host element properties and projecting content.
  • Accessibility: Emphasizes building accessible components that meet WCAG standards.
  • Use Case: Quickly scaffold a new UI component like a custom button, a data table row, or a modal dialog, ensuring it's performant, accessible, and follows current Angular patterns.

Quick Start

Generate a new Angular standalone component named 'UserProfile' with signal inputs for 'name' and 'email'.

Frequently Asked Questions about angular-component

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

FAQPage Schema
How do I build modern Angular standalone components with signal inputs?

Angular standalone components use signal-based inputs and outputs alongside OnPush change detection to ensure efficient reactive data flow. This modern approach simplifies module management by default while maintaining high performance.

What is the best way to create accessible Angular components with content projection?

Creating accessible Angular components with content projection involves using host bindings and content projection features while adhering to WCAG standards. This ensures reusable UI elements like modals and buttons meet accessibility requirements.

Does this Angular component generator support native control flow syntax and optimized image loading?

Yes, this Angular component generation approach supports native control flow syntax and optimized image loading. It facilitates creating performant standalone UI elements following Angular v20+ best practices.

How do I scaffold an Angular component using OnPush change detection and lifecycle hooks?

Scaffold an Angular component using OnPush change detection and lifecycle hooks by generating a standalone component with signal-based reactivity. This pattern guarantees optimized rendering and maintainable code for reusable UI elements.

When should I use signal-based inputs instead of traditional decorators in Angular components?

Use signal-based inputs instead of traditional decorators in Angular components when you need efficient reactive data flow and OnPush change detection. This modern v20+ pattern improves performance and maintainability for standalone UI elements.