🎯

angular-component

🎯Skill

from analogjs/angular-skills

What it does

An Angular v20+ component skill from the analogjs/angular-skills collection, teaching AI coding agents modern standalone component patterns with signal inputs/outputs, OnPush change detection, and native control flow.

Overview

Angular Component is a skill from the analogjs/angular-skills collection, providing AI coding agents with up-to-date Angular v20+ component patterns and best practices. This skill teaches agents how to build standalone components with signal inputs/outputs, OnPush change detection, host bindings, content projection, and lifecycle hooks using modern Angular conventions.

Key Features

Modern Angular v20+ Patterns: Covers standalone components (no standalone: true needed), signal-based inputs/outputs/queries, native control flow (@if, @for, @switch), and OnPush change detection
Signal-Based Reactivity: Provides examples of signal(), computed(), linkedSignal(), and effect() for reactive state management in components
Comprehensive Component API: Includes patterns for content projection, host bindings, lifecycle hooks, and the inject() function for dependency injection
Easy Installation: Install individually via [38;5;250m███████╗██╗ ██╗██╗██╗ ██╗ ███████╗[0m [38;5;248m██╔════╝██║ ██╔╝██║██║ ██║ ██╔════╝[0m [38;5;245m███████╗█████╔╝ ██║██║ ██║ ███████╗[0m [38;5;243m╚════██║██╔═██╗ ██║██║ ██║ ╚════██║[0m [38;5;240m███████║██║ ██╗██║███████╗███████╗███████║[0m [38;5;238m╚══════╝╚═╝ ╚═╝╚═╝╚══════╝╚══════╝╚══════╝[0m

[90m┌[39m [46m[30m skills [39m[49m [90m│[39m [90m│[39m [2mTip: use the --yes (-y) and --global (-g) flags to install without prompts.[22m [?25l[90m│[39m [32m◇[39m Source: https://github.com/analogjs/angular-skills.git (skills/angular-component) [?25h[?25l[90m│[39m [35m◒[39m Cloning repository[999D[J[35m◐[39m Cloning repository[999D[J[35m◓[39m Cloning repository[999D[J[35m◑[39m Cloning repository[999D[J[35m◒[39m Cloning repository[999D[J[35m◐[39m Cloning repository[999D[J[35m◓[39m Cloning repository[999D[J[35m◑[39m Cloning repository[999D[J[35m◒[39m Cloning repository.[999D[J[35m◐[39m Cloning repository.[999D[J[35m◓[39m Cloning repository.[999D[J[35m◑[39m Cloning repository.[999D[J[32m◇[39m Repository cloned [?25h[?25l[90m│[39m [999D[J[32m◇[39m Found [32m1[39m skill [?25h[90m│[39m [34m●[39m Skill: [36mangular-component[39m [90m│[39m [90m│[39m [2mCreate modern Angular standalone components following v20+ best practices. Use for building UI components with signal-based inputs/outputs, OnPush change detection, host bindings, content projection, and lifecycle hooks. Triggers on component creation, refactoring class-based inputs to signals, adding host bindings, or implementing accessible interactive components.[22m [?25l[90m│[39m [999D[J[32m◇[39m 41 agents [?25h[90m│[39m [34m●[39m Installing to: [36mClaude Code[39m [?25l[90m│[39m [36m◆[39m Installation scope [36m│[39m [36m└[39m or install the entire Angular skills collection at once

Who is this for?

Angular developers who want their AI coding agent to generate modern Angular v20+ component code with the latest patterns
Teams migrating from older Angular versions who need agents that understand standalone components and signal-based APIs
Developers building Angular applications who want AI assistance that follows current best practices, avoiding deprecated patterns like NgModules and @Input() decorators

📦

Same repository

analogjs/angular-skills(10 items)

angular-component

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add analogjs/angular-skills --skill angular-component

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add analogjs/angular-skills --skill angular-component

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/angular-component/SKILL.md

SKILL.md

4,558Installs

245

Last UpdatedJan 29, 2026

View on GitHub Back to Skills

More from this repository9

🎯

angular-signals🎯Skill

Angular v20+ Signals API best practices for reactive state management, computed values, and effect handling.

🎯

angular-forms🎯Skill

Angular skills for building signal-based forms with Angular v21+'s Signal Forms API, including schema-based validation, two-way binding, and dynamic form patterns.

🎯

angular-routing🎯Skill

Covers Angular routing patterns including lazy loading, route guards, resolvers, nested routes, and navigation strategies for Angular v20+

🎯

angular-http🎯Skill

Covers Angular HttpClient patterns including interceptors, error handling, request/response transformation, and API communication best practices

🎯

angular-di🎯Skill

Covers Angular v20+ dependency injection using inject(), injection tokens, and provider configuration for service architecture, managing singleton vs scoped services, and understanding the DI hierarchy.

🎯

angular-directives🎯Skill

Covers Angular directive patterns including custom attribute and structural directives, DOM manipulation, and component behavior extension

🎯

angular-testing🎯Skill

Angular skills for building signal-based forms with Angular v21+'s Signal Forms API, including schema-based validation, two-way binding, and dynamic form patterns.

🎯

angular-tooling🎯Skill

Covers Angular development tooling including Angular CLI, build optimization, testing configuration, and project scaffolding for Angular v20+

🎯

angular-ssr🎯Skill

Angular skills for building signal-based forms with Angular v21+'s Signal Forms API, including schema-based validation, two-way binding, and dynamic form patterns.