Angular inject() functions offer cleaner alternative to providers for local component logic

A pattern gaining attention in the Angular community replaces injectable services and host directives with standalone inject() functions for component-local behavior. The approach is demonstrated through an injectVisibility() function that uses IntersectionObserver to track whether a component's host element is in the viewport. Unlike a service-based solution, this pattern requires no provider declaration in the component metadata, eliminating a common source of silent bugs. The function leverages Angular's injection context during field initialization to access ElementRef and DestroyRef directly, tying the observer's lifecycle to the component automatically. The result is a reusable, self-contained utility that can pause polling, suspend animations, or skip expensive rendering when a component is off-screen.