skills.rest
Blotch-Smart-Frames
Blotch-Smart-FramesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

angular-directives

Create custom attribute, structural, and host directives in Angular v20+.

Updated Feb 9, 2026
Search Tags:#typescript#angular#signals#directives#dom manipulation#structural directives#host directives
One-click install
npx skills add https://github.com/Blotch-Smart-Frames/Board --skill angular-directives-blotch-smart-frames
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-directives
Source: https://github.com/Blotch-Smart-Frames/Board/tree/main/packages/client/.claude/skills/angular-directives
Command: npx skills add https://github.com/Blotch-Smart-Frames/Board --skill angular-directives-blotch-smart-frames

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building reusable DOM behaviors in Angular often leads to duplicated logic scattered across components. This Skill provides patterns for encapsulating DOM manipulation, event handling, and behavior composition into custom directives that can be applied declaratively to any element. ## Core Features & Use Cases - Attribute Directives: Modify element appearance and behavior with signal-based inputs, host bindings, and event listeners, such as tooltips, click-outside detection, and keyboard shortcuts. - Structural Directives: Build portals, lazy rendering, and template outlets for DOM manipulation beyond control flow, while using native @if/@for/@switch for conditionals and loops. - Host Directive Composition: Compose reusable behaviors like focusable, disableable, and hoverable onto components using the hostDirectives API with input and output exposure. - Use Case: When building a design system button that needs focus tracking, disabled states, and hover events, compose these behaviors as host directives instead of reimplementing them in every component. ## Quick Start Ask the AI to create an Angular attribute directive that shows a tooltip on hover using signal inputs and host bindings.

Frequently Asked Questions about angular-directives

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

FAQPage Schema
How do I create a custom attribute directive in Angular?▼

Define a class with the @Directive decorator and a bracketed selector like '[appHighlight]', then use signal inputs with aliases to receive values and the host property to bind classes, styles, and events. Inject ElementRef to access the underlying DOM element directly.

How to compose directives on an Angular component with hostDirectives?▼

Add the hostDirectives array to the @Component decorator listing the directives to apply, optionally exposing their inputs and outputs by name. The component can then inject the host directive instance to read its state, such as checking a disabled signal.

When should I use a structural directive instead of @if in Angular?▼

Use native @if, @for, and @switch for control flow. Reserve custom structural directives for DOM manipulation beyond conditionals, such as rendering content into a different container with a portal or deferring one-time rendering of heavy components.

Should I use the host property or @HostBinding in Angular directives?▼

Prefer the host property in the @Directive decorator over @HostBinding and @HostListener decorators. The host object centralizes event listeners, class bindings, and attribute bindings in one declarative location, which is the recommended pattern in Angular v20+.

How do I detect clicks outside an element in Angular?▼

Create a directive listening to document:click via the host property, then check whether the event target is contained within the injected ElementRef's native element. Emit an output when the click occurs outside so parent components can close menus or dropdowns.

Related Skills

Explore More Software Engineering Skills→
DITEKmaxDITEKmax

angular-directives

Create custom Angular directives for reusable DOM manipulation and UI behaviors.

Community
Advanced
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
knckknckknckknck

fixing-accessibility

Identify and fix HTML accessibility issues in interactive UI controls and forms.

Community
Intermediate
alexander-kastilalexander-kastil

angular-directives

Create and compose Angular directives to extend DOM behavior in Angular v20+.

Community
Advanced