Angular v17 introduced @defer blocks, a smarter way to lazy load content right inside templates. Instead of relying solely on route-level lazy loading, you can now delay rendering specific sections like charts, modals, or comment threads until they’re actually needed. 

How @defer Works

Instead of loading everything at once, Angular’s @defer lets you wait to load certain elements such as charts or extra content, until users scroll or click.

Advanced Triggering Strategies:

The true power of @defer lies in its rich set of triggers, which go far beyond simple visibility.

  • on viewport: Triggers when the placeholder enters the viewport.
  • on interaction: Triggers on click or input events within the placeholder.
  • on hover: Triggers when the mouse hovers over the placeholder area.
  • on timer(x): Triggers after a specified duration.
  • when <expression>: The most powerful trigger, which loads the content when a boolean expression becomes true. This is perfect for programmatic control.

You can also combine triggers. For instance,setting up a component to load when it’s visible or when the browser is idle, whichever comes first.

Practical Example (Prefetching a Heavy Component on Hover):

Imagine a dashboard with several cards, one of which opens a complex and data-intensive “Reporting” modal. We want to load the ReportingComponent’s code as soon as the user hovers over the “Open Report” button. Doing so, gives the Angular app enough time to make the component ready. So when the user clicks the button, it is already loaded.

<!-- in dashboard.component.html --><h2>Quarterly Sales Overview</h2><p>Some summary data for the dashboard...</p>
<!-- The @defer block for the reporting component -->@defer (on hover; on interaction) { <app-reporting-modal [data]="salesData"></app-reporting-modal>} @placeholder { <!-- This is what's shown initially. We can style it to look like a disabled button --> <button class="btn btn-primary-outline">Open Report</button>} @loading { <!-- Optional: show a spinner while the component chunk is being downloaded --> <button class="btn btn-primary-outline" disabled><span class="spinner-border spinner-border-sm"></span>Loading Report... </button>}

Deferrable Views in Angular – How it works:

  • Initially, only the placeholder button is rendered. The ReportingModalComponent and its dependencies are not loaded.
  • When the user’s mouse hovers over the button (on hover), @defer starts prefetching the JavaScript chunk for ReportingModalComponent in the background.
  • If the user clicks the button (on interaction), the block is triggered immediately.
  • By the time the click happens, the code is likely already prefetched, leading to a near-instantaneous rendering of the modal and a vastly improved user experience.

Conclusion

@defer is a smart way to speed up your Angular app by loading heavy components only when needed. It gives you control over what loads and when, directly in your templates. If you want to build fast, efficient apps without overcomplicating the code, it’s a smart move to hire Angular developers who already know how to use features like @defer effectively.