angular-directives

Name: angular-directives
Availability: InStock
Author: ROU-Technology

Create reusable Angular directives for DOM behavior across attribute, host, and structural types.

Updated Jan 25, 2026

Search Tags:#angular #patterns #composition #portal #directives #template-outlet #host-directives

Ready to run

npx skills add https://github.com/ROU-Technology/ng-utils --skill angular-directives

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-directives
Source: https://github.com/ROU-Technology/ng-utils/tree/main/.agents/skills/angular-directives
Command: npx skills add https://github.com/ROU-Technology/ng-utils --skill angular-directives

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Angular projects often duplicate directive logic across components. This Skill provides a structured approach to building reusable, composable directives that extend DOM behavior in Angular v20+.

Core Features & Use Cases

Attribute directives for modifying element behavior and appearance.
Structural directives for portals, overlays, and dynamic insertion points.
Host directives for composing reusable behaviors on components.
Directive Composition API to combine multiple directives on a single element or component.
See references/directive-patterns.md for advanced patterns and best practices.

Quick Start

Create a new directive file, decorate it with @Directive and a selector (for example appHighlight), implement the behavior, and use it in templates like <p appHighlight="yellow">Highlighted</p>.

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 encapsulate DOM behavior across attribute, host, and structural directives using @Directive decorators with selectors. You implement the behavior with Angular's directive APIs like ElementRef and TemplateRef, then apply them to templates for consistent DOM enhancements.

What's the difference between attribute, structural, and host directives in Angular?▼

Attribute directives modify element appearance and behavior, structural directives handle dynamic insertion points and portals using TemplateRef, and host directives compose reusable behaviors onto components. The Directive Composition API combines multiple directives on a single element.

Do I need external dependencies to build Angular directives?▼

No external dependencies are required to build Angular directives. You only need Angular's standard directive APIs including Directive, TemplateRef, ViewContainerRef, and ElementRef, along with standard tooling for Angular v20+ projects.

How do I use the Directive Composition API to combine behaviors on one element?▼

The Directive Composition API combines multiple directives on a single element or component in Angular. Host directives specifically compose reusable behaviors onto components, preventing duplicated directive logic across your UI libraries and feature modules.

Can I build portals and overlays using structural directives in Angular?▼

Structural directives in Angular create portals, overlays, and dynamic insertion points. They leverage TemplateRef and ViewContainerRef APIs to manage where and how template content renders, extending DOM behavior for complex UI patterns.

When should I extract component logic into a reusable directive in Angular?▼

Extract component logic into reusable Angular directives when projects duplicate DOM behavior across components. This structured approach ensures consistent DOM enhancements across UI libraries, component kits, and feature modules without rewriting logic.