angular-directives

To create reusable Angular directives for DOM manipulation, build attribute directives that encapsulate class toggles, aria attributes, and event wiring. This approach eliminates duplicated imperative code and simplifies testing across interactive controls.

Host directives in Angular v20+ work by composing multiple behaviors like focus, ripple, and elevation into a single component API. Using hostDirectives with exportable APIs and host bindings ensures clean, maintainable UI behavior composition.

The best way to implement lazy loading and infinite scroll in Angular is by integrating IntersectionObserver within structural directives. This pattern provides efficient, effect-driven updates for conditional rendering and resize-aware UI without replacing native control-flow constructs.

Yes, you can use TemplateRef and ViewContainerRef to create structural portal patterns for dynamic overlays and modals. These patterns support template outlets and conditional render strategies for dynamic insertion points within your Angular application.

Yes, you need Angular v20+ to use hostDirectives composition patterns. This Skill specifically targets Angular v20+ projects to support modern attribute directives, structural portals, lazy rendering, and host directive composition for component libraries.

You should avoid replacing native control-flow constructs with structural directives to maintain predictable rendering behavior. Instead, structural portals and lazy render directives should complement native constructs by handling specific dynamic insertion points and overlay strategies.