skills.rest
alexander-kastil
alexander-kastilCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-directives

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

Updated Mar 5, 2026
Search Tags:#typescript#frontend#angular#composition#dom#directives
One-click install
npx skills add https://github.com/alexander-kastil/advanced-angular-agentic-swe --skill angular-directives-alexander-kastil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-directives
Source: https://github.com/alexander-kastil/advanced-angular-agentic-swe/tree/main/.github/skills/angular-directives
Command: npx skills add https://github.com/alexander-kastil/advanced-angular-agentic-swe --skill angular-directives-alexander-kastil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Angular projects often duplicate directive logic across components; this skill provides a structured approach to create and reuse attribute, structural, and host directives to standardize behavior and DOM manipulation.

Core Features & Use Cases

  • Attribute directives for consistent element behavior and styling
  • Structural directives for portals/overlays and dynamic insertion points
  • Host directives to compose multiple behaviors across components Example: build a focusable button by composing focusable and disableable directives

Quick Start

Create a reusable focusable directive and apply it to a button to extend its behavior

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 extend DOM behavior?▼

Create reusable Angular directives by building attribute directives for consistent element styling or structural directives for dynamic insertion points. This approach standardizes DOM manipulation logic across components to prevent duplicated behavior implementations.

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

Compose Angular host directives to combine multiple behaviors across components without repeating logic. You can build a focusable button by applying both focusable and disableable directives, creating modular component behaviors through native composition.

Does this Angular directives approach support structural directives for portals and overlays?▼

Yes, structural directives support portals, overlays, and dynamic insertion points. The implementation uses native Angular control flow constructs like @if, @for, and @switch rather than relying on custom structural directives for DOM manipulation.

What Angular version is required for host directives and native control flow?▼

Host directives and native control flow constructs require Angular v20 or higher. The framework version ensures compatibility with the native @if, @for, and @switch syntax used for structural DOM behavior manipulation.

Related Skills

Explore More Software Engineering Skills→
walkingriverwalkingriver

angular-directives

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

Community
Advanced
spallempatispallempati

angular-directives

Generate custom Angular directives for DOM manipulation and component interactions.

Community
Intermediate
deangilmoreremixdeangilmoreremix

angular-directives

Create reusable DOM behavior for Angular components with custom directives.

Community
Advanced
svssdevasvssdeva
1

angular-directives

Create reusable Angular directives for DOM behavior and dynamic rendering.

Community
Intermediate