Exploring Angular's @defer Block with Hands-On Demos
Among the standout additions in Angular 17 is the defer block, a feature that enables on-demand loading of components, directives, and pipes directly within your templates using @defer.
If you're past the basics and eager to see @defer in action, this interactive app showcases a range of scenarios and configurations:
Watch how runtime behavior and user interactions steer @defer, and observe which JavaScript bundles are pulled into the browser at each step.
Highlights of what's covered:
⚡️ components, directives, and pipes
⚡️ multiple triggers, alone and in combination
⚡️ real-world scenarios (🪗 accordion, 📦 npm package, and more)
⚡️ devtools-based analysis
⚡️ inline explanations
Implemented use cases include:
⚡️ conditional loading: @defer (when isVisible) {...}
⚡️ idle-triggered: @defer (on idle) {...}
⚡️ viewport-triggered: @defer (on viewport) {...}
⚡️ interaction-based: @defer (on interaction) {...}
⚡️ hover-driven: @defer (on hover) {...}
⚡️ immediate load: @defer (on immediate) {...}
⚡️ timed delay: @defer (on timer(2000ms)) {...}
🪗 accordion pattern: @defer (on hover(accordion); on timer(5s)) {...} (prior to clicking the accordion section)
👫 several deferrable units simultaneously
📦 npm package example: <link rel="modulepreload" href="chunk-BYHJVGJ4.js">
🗃️ nested defer blocks: @defer (on timer(2s)) { @defer (on interaction) {...} }
⏱️ prefetch strategy: @defer (on interaction; prefetch on idle) {...}
🚚 placeholder versus loading states: placeholder (minimum 500ms) {...} & @loading (minimum 1s; after 10ms) {...}
💥 error handling: @error {...}
Launch your browser's Network panel and experiment with the live examples to see it all unfold 💪
Follow me on twitter for more deep dives into frontend topics (js, ts, react, angular etc.)!