deferred-loading-in-angular.mdx

title	description	tags	pubDate	contributedBy
What is Deferred Loading in Angular	Deferred Loading in Angular	angular Deferred Loading Zoneless angular	Jul 22, 2023	@pawanpatil08

as a part of our ongoing work on implementing the Signals RFC, we’ve known that the existing zone-based control flow directives would not be able to function in zoneless applications. We will need to implement reactive control flow for zoneless applications. We considered modifying the existing control flow directives to support zoneless applications as well,

Goals:

• Make deferred loading in Angular predictable and ergonomic for all developers
• Reduce initial page load time due to smaller initial bundle sizes 8 Support deferred loading of directives & pipes as well as components
• Introduce new patterns to allow developers to build applications that leverage deferred loading
• Integrate deferred loaded primitive with hydration, so that developers can gain maximum benefits

Deferred blocks

{#defer}
  <calendar-cmp />
{/defer}

on and when

{#defer when cond}
  <calendar-cmp />
{/defer}

{#defer on interaction, timer(5s)}
  <calendar-cmp />
{/defer}

:loading blocks

{#defer}
  <calendar-cmp />
{:loading}
  <div class="loading">Loading the calendar...</div>
{/defer}

:placeholder blocks

{#defer when cond}
  <calendar-cmp />
{:placeholder minimum 500ms}
  <img src="placeholder.png" />
{/defer}

Will see you Built-In Control Flow in next snippets