angular-directives

Define a class with the @Directive decorator and a bracketed selector like '[appHighlight]'. Use signal-based input() with an alias matching the selector, inject ElementRef, and apply DOM changes inside an effect() or via the host property.

Add the hostDirectives array to a component's @Component metadata, listing directive classes. You can expose their inputs and outputs using the inputs and outputs options, letting consumers configure composed behaviors like disableable or hoverable directly on the component.

Prefer the host property in the @Directive decorator over @HostBinding and @HostListener decorators. The host property centralizes event listeners, class bindings, and attribute bindings in one declarative object, which is the recommended modern Angular pattern.

Do not create structural directives for conditionals or loops; use native @if, @for, and @switch control flow instead. Reserve structural directives for DOM manipulation beyond control flow, such as portals, overlays, lazy rendering, or permission-based visibility.

Use an IntersectionObserver inside a directive created in afterNextRender, observing the host element. Emit an output when the sentinel element intersects the viewport, and disconnect the observer in ngOnDestroy or when a disabled input is true.