angular-directives

Custom directives for DOM manipulation, behavior extension, and component composition in Angular v20+. Create custom directives for reusable DOM manipulation and behavior in Angular v20+. Modify the appearance or behavior of an element: Prefer host over @HostBinding / @HostListener : Use structural directives for DOM manipulation beyond control flow (portals, overlays, dynamic insertion points). For conditionals and loops, use native @if , @for , @switch . Render content in a different DOM location: Defer rendering until condition is met (one-time): Compose directives on components or other directives: Combine multiple behaviors: For advanced patterns, see references/directive-patterns.md . - Attribute directives modify element appearance and behavior using the host property for event handling, class binding, and ARIA attributes; includes patterns for tooltips, highlights, buttons, click-outside detection, and keyboard shortcuts - Structural directives handle portal rendering, lazy initialization, and template context injection for DOM manipulation beyond native @if , @for , @switch control flow - Host directives compose reusable behaviors across components and other directives, exposing inputs and outputs for flexible behavior composition - Built on Angular v20+ signals, inputs, outputs, and effects for reactive, type-safe directive development