🎯

angular-directives

🎯Skill

from analogjs/angular-skills

What it does

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

Overview

Angular Directives is a Claude Code skill that teaches AI agents how to create custom directives in Angular v20+ for DOM manipulation and behavior extension. It covers attribute directives for modifying element behavior and appearance, structural directives for portals and overlays, and host directives for composition patterns.

Key Features

Attribute Directives - Create directives that modify element appearance and behavior using signal inputs, effects, and ElementRef for direct DOM manipulation
Host Property Pattern - Use the host property instead of @HostBinding/@HostListener for cleaner event handling, class bindings, and style manipulation
Class and Style Manipulation - Build reusable directives that dynamically apply CSS classes and styles based on input signals like variant, size, and disabled state
Signal-Based Inputs - Leverage Angular's signal input system with aliases, transforms like booleanAttribute, and computed values in directive implementations
Host Directive Composition - Compose behaviors across components by applying directives as host directives for reusable behavior patterns

Who is this for?

This skill is designed for Angular v20+ developers who need to create reusable DOM behaviors, extend element functionality, or compose behaviors across components. It is particularly useful for teams building component libraries or design systems that require consistent, reusable directive patterns using modern Angular APIs.

📦

Same repository

analogjs/angular-skills(10 items)

angular-directives

Installation

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

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

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

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

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

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

SKILL.md

4,003Installs

572

Last UpdatedMar 23, 2026

View on GitHub Back to Skills

More from this repository9

🎯

angular-component🎯Skill

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.

🎯

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-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.