Open Source2025 – Present

angular-lazy-load-directive (Open Source)

Signal-based image lazy loading directive for Angular

Published npm package: an image lazy loading directive built on Angular signals and IntersectionObserver, with zoneless support, SSR and hydration support, and retry on failed loads.

NPM Package GitHub Demo

Architecture

graph TD
    A[Lazy Load Directive] --> B[Signal Inputs and Outputs]
    A --> C[IntersectionObserver]
    C --> D[Load Image in Viewport]
    D --> E[Retry on Failure]
    A --> F[SSR Safe]

Tech Stack

AngularAngular SignalsIntersectionObserverTypeScriptnpm

Challenges

No IntersectionObserver on the server
Cleaning up observers when elements are removed
Working without Zone.js

Solutions

Browser-only setup so SSR stays safe
Cleanup when the directive is destroyed
Signal-based inputs, outputs and state

Interested in working together?

I'm open to software engineering roles and contract work.

Download CV Book a Meeting