skills.rest
juhas96
juhas96COMMUNITY
Explore all skills by this author →
GitHub

angular-component

Generate Angular standalone components with signal inputs, outputs, and OnPush change detection.

Updated Mar 2, 2026
Search Tags:#typescript#angular#component#signals#ui development#standalone
One-click install
npx skills add https://github.com/juhas96/ag-grid-test --skill angular-component-juhas96
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-component
Source: https://github.com/juhas96/ag-grid-test/tree/main/.opencode/skills/angular-component
Command: npx skills add https://github.com/juhas96/ag-grid-test --skill angular-component-juhas96

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of modern, best-practice Angular standalone components, ensuring consistency and leveraging the latest features for efficient UI development.

Core Features & Use Cases

  • Standalone Components: Generates components that are standalone by default, adhering to modern Angular architecture.
  • Signal-Based Inputs/Outputs: Implements inputs and outputs using Angular Signals for improved reactivity.
  • OnPush Change Detection: Configures components for ChangeDetectionStrategy.OnPush for performance.
  • Host Bindings: Manages host element attributes, classes, and event listeners directly within the @Component decorator.
  • Content Projection: Supports complex content projection patterns for reusable UI elements.
  • Lifecycle Hooks: Integrates standard Angular lifecycle hooks like OnInit and OnDestroy.
  • Accessibility: Enforces accessibility best practices, including ARIA attributes and keyboard navigation.
  • Native Control Flow: Utilizes Angular's native @if, @for, and @switch control flow.
  • Use Case: Quickly scaffold a new interactive button component with signal inputs for its state, host bindings for styling and accessibility, and outputs for click events, ensuring it follows current Angular standards.

Quick Start

Generate a new Angular standalone component named 'user-profile-card' 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-based inputs?▼

Angular v20+ standalone components are generated by default without NgModules. They utilize signal-based inputs and outputs for reactivity, OnPush change detection for performance, and native @if/@for control flow for template logic.

What's the best way to manage content projection and host bindings in Angular?▼

Manage host element attributes, classes, and event listeners directly within the @Component decorator using host bindings. Support complex content projection patterns to build reusable UI elements efficiently.

Does this Angular component generator support native control flow and accessibility?▼

Yes, generated components utilize Angular's native @if, @for, and @switch control flow and enforce accessibility best practices. This includes implementing ARIA attributes and keyboard navigation to ensure accessible UI development.

How do I scaffold an interactive Angular button component using signals and OnPush?▼

Scaffold interactive Angular UI elements by combining signal inputs for state, host bindings for styling, and outputs for events. Configure ChangeDetectionStrategy.OnPush to optimize rendering performance for standalone components.

Can I use TypeScript lifecycle hooks and optimized image loading in standalone components?▼

Yes, standalone components integrate standard lifecycle hooks like OnInit and OnDestroy alongside optimized image loading. This ensures components follow current Angular standards for performance and resource management.

Related Skills

Explore More Software Engineering Skills→
takemo101takemo101

basic-design-writer

Generate foundational system design documents in Japanese with Mermaid diagrams.

Community
Intermediate
drhazemibclcdrhazemibclc

test-browser

Runs browser-based end-to-end tests on pages affected by a PR or branch using agent-browser CLI.

Community
Advanced
nguyenthienthanhnguyenthienthanh
24

angular-expert

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

Community
Advanced
kurojskurojs
2

scope-rule-architect-angular

Enforce Angular 20+ architecture with standalone components and the Scope Rule.

Community
Advanced