skills.rest
svssdeva
svssdevaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/svssdeva/agentic-skills --skill angular-directives-svssdeva
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
danielsogldanielsogl
39

angular-tooling

Automate Angular v20+ project scaffolding, component generation, and build configuration.

Community
Intermediate
DITEKmaxDITEKmax

angular-directives

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

Community
Advanced
deangilmoreremixdeangilmoreremix

angular-directives

Create reusable DOM behavior for Angular components with custom directives.

Community
Advanced
danielsogldanielsogl
39

angular-directives

Create reusable attribute, structural, and host directives for Angular v20+ DOM manipulation.

Community
Advanced