home / skills / hoangnguyen0403 / agent-skills-standard / directives-pipes

directives-pipes skill

safe

This skill helps you implement Angular Directives and Pure Pipes using standalone patterns for composition and reusable DOM behavior.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill directives-pipes

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

888 B

---
name: Directives & Pipes
description: Composition patterns using HostDirectives and Pure Pipes.
metadata:
  labels: [angular, directives, pipes, composition]
  triggers:
    files: ['**/*.directive.ts', '**/*.pipe.ts']
    keywords: [hostDirectives, PipeTransform, pure]
---

# Directives & Pipes

## **Priority: P2 (MEDIUM)**

## Principles

- **Composition**: Use `hostDirectives` to compose behaviors onto components/directives without inheritance.
- **Pure Pipes**: Pipes must be `pure: true` (default). They cache results based on input reference.
- **Directive Logic**: Encapsulate reusable DOM manipulation or behavioral logic in Directives (e.g., `appFocusTrap`, `appTooltip`).

## Guidelines

- **Signal Inputs**: Directives also support signal inputs.
- **Standalone**: All Pipes and Directives must be standalone.

## References

- [Composition](references/composition.md)

Overview

This skill presents concise patterns for composing Angular behaviors using HostDirectives and for creating performant, reusable Pure Pipes. It focuses on clear separation of concerns: use directives for DOM/behavior logic and pipes for deterministic, cacheable transformations. The guidance emphasizes standalone, signal-aware implementations aligned with modern TypeScript and framework practices.

How this skill works

The skill explains how to attach reusable behaviors to components or directives via hostDirectives instead of inheritance, enabling composition without tight coupling. It also defines when to implement pipes as pure to leverage automatic memoization based on input references. Practical examples show encapsulating focus management, tooltips, or other DOM concerns in directives while keeping transformation logic in standalone pure pipes.

When to use it

Compose cross-cutting behaviors onto components without class inheritance.
Encapsulate DOM manipulation, event handling or stateful UI behavior in directives.
Create deterministic, reference-based transformations as pure pipes for performance.
Expose reactive inputs using signals on directives and pipes.
Ship reusable UI primitives as standalone artifacts for easy reuse and lazy loading.

Best practices

Prefer hostDirectives to share behavior between components and directives; avoid inheritance for behavior composition.
Declare all directives and pipes as standalone for simpler imports and tree-shaking.
Keep pipes pure (pure: true) so results are memoized by input references; use impure pipes only for non-deterministic or side-effectful transformations.
Encapsulate DOM access, focus traps, and tooltip wiring inside directives to keep components declarative and testable.
Support signal-based inputs for directives and pipes to integrate with reactive state patterns.

Example use cases

Attach a reusable tooltip behavior to multiple components using hostDirectives instead of duplicating code.
Implement an appFocusTrap directive to manage keyboard focus within modals and dialogs.
Create a pure DateFormatPipe that returns cached formatted strings when the Date object reference is unchanged.
Provide a small collection of standalone pipes (currency, pluralize, truncate) for shared UI formatting.
Compose accessible form controls by combining behavior directives for validation, ARIA attributes, and keyboard handling.

FAQ

When should I make a pipe impure?

Use impure pipes only when the output depends on external state, time, or mutable inputs that do not change reference; note impure pipes run on every change detection tick and can hurt performance.

Can hostDirectives replace services?

HostDirectives are for composing UI behavior tied to the host element; use services for shared non-UI state, business logic, or cross-component coordination.