skills.rest
Zoppy-crm
Zoppy-crmOFFICIAL
Explore all skills by this author →
WebsiteGitHub

angular-component

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

Updated Mar 1, 2026
Search Tags:#accessibility#components#angular#signals#standalone#host-bindings#onpush
One-click install
npx skills add https://github.com/Zoppy-crm/.github --skill angular-component-zoppy-crm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-component
Source: https://github.com/Zoppy-crm/.github/tree/main/skills/frontend/angular-component
Command: npx skills add https://github.com/Zoppy-crm/.github --skill angular-component-zoppy-crm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Standardizes the creation and refactoring of Angular v20+ standalone components so teams can avoid inconsistent patterns, inline templates, and fragile class-based inputs while ensuring maintainability, signal-driven state, and accessibility compliance.

Core Features & Use Cases

  • Signal-based Inputs & Outputs: Encourage input.required, input defaults, computed values, and output/outputFromObservable for predictable component APIs.
  • Separation of Concerns: Enforce external HTML templates for all components and keep TypeScript files focused on logic and signals.
  • Host Bindings & Events: Use the host object for attributes, class/style bindings, aria attributes, and keyboard/event listeners.
  • Accessibility & Performance: Require WCAG AA support, AXE checks, keyboard navigation, visible focus indicators, OnPush change detection, and NgOptimizedImage for images.
  • Use Case: Build interactive UI primitives like accessible buttons, toggles, cards, and user-cards or refactor legacy class-based inputs to signal-based APIs.

Quick Start

Generate a new Angular standalone component named user-card with signal inputs for name and email, a separate HTML template, OnPush change detection, host bindings for accessibility, and WCAG AA compliance.

Frequently Asked Questions about angular-component

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

FAQPage Schema
How do I create accessible Angular standalone components using signal-based inputs?▼

Refactoring class-based Angular inputs to signals involves replacing traditional @Input decorators with signal-based input APIs like input.required and input defaults, while converting outputs using output or outputFromObservable for predictable state management.

What is the best way to enforce OnPush change detection and NgOptimizedImage in Angular v20+?▼

Enforcing OnPush change detection and NgOptimizedImage in Angular v20+ requires building standalone components with signal-driven state and external templates, ensuring optimized rendering and image loading performance across interactive UI controls.

Does this approach support adding host bindings and keyboard event listeners for WCAG AA accessibility?▼

Yes, this approach supports WCAG AA accessibility by using the host object for attributes, class and style bindings, aria attributes, and keyboard event listeners, ensuring visible focus indicators and full keyboard navigation for interactive UI primitives.

Can I use signal-driven Angular components for building interactive UI primitives like toggles and cards?▼

Yes, you can use signal-driven Angular components to build interactive UI primitives like accessible buttons, toggles, cards, and user-cards, utilizing computed values and signal-based inputs for predictable component APIs and consistent rendering.

Why do my Angular standalone components need separate HTML templates and signal-based outputs?▼

Angular standalone components need separate HTML templates and signal-based outputs to enforce separation of concerns, keeping TypeScript files focused on logic and signals while ensuring maintainability and predictable component APIs across Angular v20+ applications.

Related Skills

Explore More Software Engineering Skills→
analogjsanalogjs
595

angular-component

Designs Angular v20+ standalone components with signal-based inputs/outputs and content projection.

Official
Advanced
deangilmoreremixdeangilmoreremix

angular-component

Create Angular v20+ standalone components with signal-based inputs and OnPush change detection.

Community
Advanced
neogenzneogenz
4

angular-material-cdk-animations

Implement Angular Material, CDK, and animations in zoneless signals-first UIs.

Community
Advanced
fanguyunfanguyun

angular-architect

Generate Angular 17+ standalone components with routing, NgRx, and RxJS.

Community
Advanced