Leveraging Deferrable Views in Angular 17

Deferrable Views allow you to declaratively mark parts of your templates as non-essential for immediate rendering. It is kind like delaying the rendering of certain parts of a page to improve the perceived performance of your application, as well as optimize the initial bundle size and loading times.

There are a number of real-world scenarios where defer rendering can help to achieve faster load times such as e-commerce product pages – in this example, you can initially display the essential product details and then lazy load additional content such as reviews when the user clicks on a Read more button or scrolls down the page.

Let’s quickly see how this works. To lazy load a component, you need to use a Standalone component, otherwise deferring won’t work. Then you want to wrap up the Standalone component in a @defer block, like so:

@defer {
  <delayed-component />
}

You can also define conditions...