angular-directives_skill

Overview

This skill teaches how to create custom directives in Angular v20+ for reusable DOM manipulation and composable behaviors. It covers attribute directives, structural directives for portals and lazy rendering, and host directives for composing behaviors on components. The guidance focuses on practical patterns using the modern inject/input/output/effect APIs and recommends native control-flow directives for conditionals and loops.

How this skill works

The skill inspects common UI needs and maps them to three directive types: attribute directives to change appearance or attach behavior, structural directives to insert or move templates in the DOM, and host directives to compose reusable behaviors onto components. Examples demonstrate using inputs, outputs, host bindings, document-level event handlers, and the new hostDirectives composition API. Each pattern shows lifecycle handling, DOM placement, and defensive checks to keep directives predictable and performant.

When to use it

• Add reusable element behavior like tooltips, keyboard shortcuts, or click-outside detection.
• Modify classes, styles, or attributes declaratively across many elements (buttons, form controls).
• Render content outside the component tree (modals, overlays, portals) or defer heavy content until needed.
• Compose shared behaviors (focus, disable, ripple) across multiple components without code duplication.
• Expose host directive outputs and inputs on wrapper components for seamless event forwarding.

Best practices

• Prefer host property on @Directive for bindings and listeners instead of @HostBinding/@HostListener.
• Use native @if/@for/@switch for control flow; reserve structural directives for portals, outlets, or one-time lazy render.
• Keep directive inputs small and use booleanAttribute transform for flag-style inputs.
• Attach document-level listeners carefully and clean up on destroy to avoid memory leaks.
• Compose behavior with hostDirectives to share logic and forward inputs/outputs instead of inheritance.

Example use cases

• Attribute directive to highlight elements or toggle button variants and disabled state.
• Tooltip directive that appends an accessible tooltip element to document.body and positions it.
• Portal directive to render modals or menus at body level while maintaining template context.
• LazyRender directive to postpone heavy component creation until the user activates a tab.
• Host directives to add focus, hover, disable, ripple, or elevation behaviors to custom components.