skills.rest
afonsoft
afonsoftCOMMUNITY
Explore all skills by this author →
Website𝕏@afonsoftGitHub

angular-component

Create Angular v20+ standalone components using signal inputs, outputs, and host bindings.

Updated Aug 10, 2025
Search Tags:#typescript#accessibility#frontend#angular#signals#template syntax#standalone components
One-click install
npx skills add https://github.com/afonsoft/ai-studio-workspace --skill angular-component-afonsoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-component
Source: https://github.com/afonsoft/ai-studio-workspace/tree/main/agents/skills/angular-component
Command: npx skills add https://github.com/afonsoft/ai-studio-workspace --skill angular-component-afonsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Modern Angular development has shifted to standalone components with signal-based reactivity, but many developers still write legacy patterns like decorator-based inputs, NgModules, and structural directives. This Skill provides the correct v20+ patterns so generated components follow current Angular conventions. ## Core Features & Use Cases - Signal-Based Components: Generate components using input(), output(), model(), and computed() instead of @Input()/@Output() decorators. - Modern Template Syntax: Enforces native control flow (@if, @for, @switch), host object bindings, and NgOptimizedImage instead of legacy directives. - Accessibility & Advanced Patterns: Covers WCAG AA requirements, content projection, view/content queries, @defer lazy loading, and dependency injection via inject(). - Use Case: Ask the AI to build an accessible toggle switch component, and it produces a standalone component with signal inputs, host bindings for ARIA attributes, and keyboard event handling. ## Quick Start Create an Angular standalone component for a user card with signal inputs, an output event, and OnPush change detection.

Frequently Asked Questions about angular-component

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

FAQPage Schema
How do I create a standalone component in Angular v20?▼

Define a class with the @Component decorator; standalone is the default in v20+, so do not set standalone: true. Use signal inputs via input() or input.required(), outputs via output(), and set changeDetection to ChangeDetectionStrategy.OnPush.

How do I convert @Input decorators to signal inputs in Angular?▼

Replace @Input() with the input() function for optional inputs or input.required() for mandatory ones. Use the transform option with booleanAttribute or numberAttribute for attribute coercion, and alias for custom binding names.

Should I use @HostBinding or the host object in Angular components?▼

Use the host object in the @Component decorator, not @HostBinding or @HostListener decorators. The host object supports static attributes, class and style bindings, ARIA attributes, and event listeners like (click) and (keydown.enter).

Can I still use *ngIf and *ngFor in Angular v20 templates?▼

No, use native control flow blocks instead: @if/@else for conditionals, @for with a track expression for loops, and @switch for multi-branch logic. Also avoid ngClass and ngStyle in favor of direct [class] and [style] bindings.

How do I lazy load a component with @defer in Angular?▼

Wrap the component in an @defer block with triggers like on viewport, on idle, on interaction, or on timer. Add @placeholder, @loading, and @error blocks to handle each loading state, and use prefetch triggers for earlier loading.

Related Skills

Explore More Software Engineering Skills→
Blotch-Smart-FramesBlotch-Smart-Frames

angular-di

Implement dependency injection in Angular v20+ using inject(), injection tokens, and providers.

Official
Intermediate
ROU-TechnologyROU-Technology

angular-testing

Write unit and integration tests for Angular v21+ components and services.

Official
Advanced
RzyfrontRzyfront
5

vendix-frontend-state

Automate Angular state management with BehaviorSubject services and Angular 20 signals.

Community
Advanced
kuse-aikuse-ai
6

ui-component-builder

Build reusable UI components for React, Vue, and vanilla JavaScript.

Official
Basic