skills.rest
raudyagdel
raudyagdelCOMMUNITY
Explore all skills by this author →
GitHub

angular-directives

Create reusable Angular attribute, structural, and host directives.

Updated Aug 23, 2026
Search Tags:#typescript#angular#composition#portal#directives#dom-manipulation
One-click install
npx skills add https://github.com/raudyagdel/ai_setup_and_tips --skill angular-directives-raudyagdel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-directives
Source: https://github.com/raudyagdel/ai_setup_and_tips/tree/main/.agents/skills/angular-directives
Command: npx skills add https://github.com/raudyagdel/ai_setup_and_tips --skill angular-directives-raudyagdel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Angular directives enable encapsulating reusable DOM behavior to avoid duplicating UI logic across components. This skill provides patterns for attribute directives, structural directives for portals/overlays, and host directives to compose behaviors across components, improving consistency and reducing boilerplate.

Core Features & Use Cases

  • Attribute directives to modify element appearance and behavior
  • Structural directives for portals, overlays, and dynamic DOM insertion
  • Host directives that compose multiple behaviors into reusable components
  • Pattern-driven guidance with references to directive-patterns.md for advanced scenarios

Quick Start

Use the angular-directives skill to create a new directive, apply it to a component, and progressively compose more complex directives to achieve reusable UI behaviors. For example, develop an attribute directive to highlight an element, then a structural directive to render content in a portal, and finally a host directive to combine both behaviors across components.

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 to avoid duplicating DOM interaction logic?▼

Reusable Angular directives encapsulate DOM behavior into attribute or structural directives, preventing logic duplication across components. This skill provides patterns for modifying elements, rendering portals, and composing multiple behaviors to reduce boilerplate.

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

Attribute directives modify element appearance and behavior, while structural directives handle dynamic DOM insertion for portals and overlays. This skill provides pattern-driven guidance for both, including lazy rendering and template outlets using TypeScript.

How do I compose multiple directive behaviors across Angular components?▼

Use host directives to compose multiple behaviors into reusable Angular components. This skill applies patterns for directive composition, allowing you to combine attribute and structural directives across components to improve consistency.

Can I use this to build structural directives for Angular portals and overlays?▼

Yes, this skill provides patterns for structural directives specifically designed for portals, overlays, and dynamic DOM insertion. It enforces conventions for portal rendering and lazy rendering in modern Angular v20+ applications.

Does this skill work with modern Angular v20+ applications?▼

Yes, this skill is designed for modern Angular apps v20+ needing attribute, structural, and host directives. It enforces framework conventions using TypeScript to ensure compatibility with current Angular composition patterns.

Related Skills

Explore More Software Engineering Skills→
walkingriverwalkingriver

angular-directives

Create reusable Angular v20+ directives for DOM manipulation and composition.

Community
Advanced
ngx-signal-formsngx-signal-forms
3

angular-directives

Create reusable Angular DOM behaviors using attribute, structural, and host directives for overlays, portals, and focus management.

Official
Advanced
xocomilxocomil
5

angular-directives

Create reusable Angular directives for DOM behavior and component libraries.

Community
Advanced
danielsogldanielsogl
39

angular-directives

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

Community
Advanced