angular-directives

Create reusable Angular directives for DOM behavior and dynamic rendering.

1|1|Updated Apr 20, 2026

Search Tags:#typescript #angular #directives #host-directives #attribute-directive #structural-directive

Ready to run

npx skills add https://github.com/svssdeva/agentic-skills --skill angular-directives-svssdeva

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-directives
Source: https://github.com/svssdeva/agentic-skills/tree/main/angular/angular-directives
Command: npx skills add https://github.com/svssdeva/agentic-skills --skill angular-directives-svssdeva

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Angular developers need a clean, reusable way to package DOM behavior so templates stay readable and UI logic is consistent across the app.

Core Features & Use Cases

Attribute directives for reusable behavior: Create directives that modify element appearance/behavior using inputs and reactive effects (e.g., highlighting, tooltips, click-outside handling, keyboard shortcuts).
Structural directives for dynamic DOM manipulation: Render content in a different location (portals), defer rendering until needed (lazy render), and project templates with context (template outlet patterns).
Host directives and composition: Share behaviors across components by composing host directives and exposing their outputs for parent components to react to.

Quick Start

Use the angular-directives skill to design an attribute directive that shows a tooltip on hover and is configurable via an input alias.

Frequently Asked Questions about angular-directives

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

FAQPage Schema

How do I create reusable Angular directives for DOM behavior?▼

Reusable Angular directives are created using the @Directive selector with typed inputs, outputs, and host bindings to package consistent DOM behaviors across UI components without relying on ad-hoc template logic.

What is the difference between attribute directives and structural directives in Angular?▼

Attribute directives modify element appearance and behavior using inputs and host event bindings, while structural directives manipulate the DOM dynamically using TemplateRef and ViewContainerRef for rendering and portals.

How do I use host directives to share behaviors across Angular components?▼

Host directives share behaviors across components by composing multiple directives and exposing their outputs, allowing parent components to react to events using Angular v20+ composition patterns.

Does this approach to building Angular directives require a specific framework version?▼

Building Angular directives with these patterns requires Angular v20+ to leverage modern @Directive selectors, typed inputs, host bindings, and TemplateRef/ViewContainerRef usage effectively.

How do I implement a tooltip directive in Angular that shows on hover?▼

An Angular tooltip directive is implemented as an attribute directive using inputs for configuration, reactive effects for hover state, and host event bindings to toggle visibility.

What's the best way to dynamically render Angular templates in a different DOM location?▼

Dynamically rendering Angular templates in a different DOM location is achieved using structural directives with TemplateRef and ViewContainerRef to implement portal patterns for content projection.