skills.rest
choyiny
choyinyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-component

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

30|12|Updated Apr 15, 2022
Search Tags:#accessibility#angular#component#signals#standalone#onpush#host-binding
One-click install
npx skills add https://github.com/choyiny/cscc09.com --skill angular-component-choyiny
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-component
Source: https://github.com/choyiny/cscc09.com/tree/main/.agents/skills/angular-component
Command: npx skills add https://github.com/choyiny/cscc09.com --skill angular-component-choyiny

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and refactoring of Angular v20+ UI components to follow modern signal-based patterns, reduce boilerplate, and ensure accessible, predictable component behavior.

Core Features & Use Cases

  • Signal-first component patterns: guidance for converting class-based inputs to signal inputs, computed values, and model-based two-way bindings.
  • Host bindings and event patterns: use host object bindings for classes, styles, attributes, and keyboard/mouse events instead of decorators.
  • Accessibility, lifecycle, and DI: practices for AXE/WCAG AA compliance, afterNextRender/afterRender usage, inject-based dependency retrieval, and content/view queries.
  • Use case: refactor legacy interactive widgets into standalone, OnPush components with proper ARIA attributes, keyboard navigation, and signal-driven outputs.

Quick Start

Create an Angular v20+ standalone component that uses signal-based inputs and outputs, OnPush change detection, host bindings for accessibility, and emits selection events.

Frequently Asked Questions about angular-component

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

FAQPage Schema
How do I build Angular components using signal-based inputs and OnPush change detection?▼

To build Angular components with signal-based inputs, use signal inputs and outputs alongside OnPush change detection. This modern pattern reduces boilerplate and ensures predictable component behavior in Angular v20+ applications.

Can I refactor class-based Angular inputs to signals and model two-way bindings?▼

Yes, you can refactor class-based Angular inputs to signals by converting them to signal inputs and model-based two-way bindings. This approach streamlines component creation and enforces modern signal-first component patterns.

How do you use host bindings for accessibility and keyboard events in Angular v20+?▼

Use host object bindings for classes, styles, attributes, and keyboard or mouse events instead of decorators. This Angular v20+ pattern supports AXE and WCAG AA compliance by managing accessibility attributes directly in the host configuration.

What is the best way to implement accessibility and ARIA attributes in modern Angular components?▼

The best way to implement accessibility in modern Angular components is using host-based bindings for ARIA attributes and keyboard navigation. This ensures AXE and WCAG AA compliance while maintaining standalone, OnPush component architecture.

Does this Angular signal component approach support template control flow and content projection?▼

Yes, the Angular signal component approach supports template control flow alternatives, content projection, and view queries. It integrates inject-based dependency retrieval and lifecycle hooks like afterNextRender for comprehensive UI development.

Related Skills

Explore More Software Engineering Skills→
shaprisshapris

angular-tooling

Run Angular CLI commands for project setup, scaffolding, builds, and tests.

Community
Advanced
sebasmzgsebasmzg

angular

Guide Angular NgModule patterns for non-standalone components and lazy-loaded routes.

Community
Intermediate
nguyenthienthanhnguyenthienthanh
24

angular-expert

Optimize Angular 17+ components and state management with signals and RxJS.

Community
Advanced
wilfriedagowilfriedago
2

angular-component

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

Community
Intermediate