skills.rest
deangilmoreremix
deangilmoreremixCOMMUNITY
Explore all skills by this author →
GitHub

angular-component

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

Updated Nov 18, 2025
Search Tags:#accessibility#components#angular#signals#standalone#onpush#host-binding
One-click install
npx skills add https://github.com/deangilmoreremix/videoremix.vip2 --skill angular-component-deangilmoreremix
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-component
Source: https://github.com/deangilmoreremix/videoremix.vip2/tree/main/.kilo/skills/angular-component
Command: npx skills add https://github.com/deangilmoreremix/videoremix.vip2 --skill angular-component-deangilmoreremix

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a clear, production-ready pattern for creating modern Angular standalone components that use signals instead of class-based inputs, enforce OnPush change detection, and guarantee accessibility and performance across applications.

Core Features & Use Cases

  • Signal-based Inputs & Outputs: Guidance for required and optional inputs, transforms, computed values, model two-way bindings, and outputs or outputFromObservable for RxJS interoperability.
  • Host Bindings & Accessibility: Patterns for host-level attributes, event listeners, ARIA attributes, keyboard support, and AXE/WCAG AA compliance for interactive controls.
  • Template & Lifecycle Patterns: Native control-flow templates, content projection, view/content queries, dependency injection via inject(), NgOptimizedImage usage, defer for dynamic components, and error boundary patterns for robust UIs.
  • Use Case: Build or refactor reusable UI primitives (buttons, cards, toggles, sliders) and complex composed components (tabs, galleries, dashboards) to be performant, testable, and accessible.

Quick Start

Create a standalone Angular v20+ component with signal-based inputs and outputs, OnPush change detection, accessible host bindings, and native control-flow templates.

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 components using signal-based inputs?▼

Create modern Angular signal-based inputs by building standalone components with OnPush change detection, applying signal APIs for required and optional inputs, transforms, computed values, and two-way model bindings.

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

Refactor Angular class-based inputs to signals by migrating to standalone components with OnPush change detection, replacing property decorators with signal-based inputs, outputs, and outputFromObservable for RxJS interoperability.

How do you implement accessible host bindings in Angular components?▼

Implement accessible Angular host bindings by defining host-level attributes, event listeners, ARIA attributes, and keyboard support to ensure AXE/WCAG AA compliance for interactive controls.

Does this Angular component pattern support content projection and native control-flow templates?▼

Yes, the Angular component pattern supports native control-flow templates, content projection, view and content queries, and NgOptimizedImage integration for building robust and performant composed UIs.

How do I handle dynamic component loading and error boundaries in Angular?▼

Handle dynamic Angular component loading and error boundaries by applying the defer template syntax for dynamic components and implementing error boundary patterns for robust UI rendering.

Can I use RxJS observables with Angular signal-based outputs?▼

Yes, you can use RxJS observables with Angular signal-based outputs by utilizing the outputFromObservable function to achieve seamless RxJS interoperability within your standalone components.

Related Skills

Explore More Software Engineering Skills→
kevinchathamkevinchatham
1

angular-component

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

Community
Advanced
choyinychoyiny
30

angular-component

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

Community
Advanced
ic-facetic-facet

angular-core

Implement modern Angular patterns with standalone components and signals.

Official
Intermediate
nimadorostkarnimadorostkar
25

angular

Enforce standalone components, signal-based state, and OnPush change detection in Angular 17+ applications.

Community
Advanced