What is the advantages of use the new "defer" instead of a *ngIf in Angular 17?

Issue

Angular recents announced v17 of Angular, that will have a new solution for lazy loading components, called Deferred Loading.

What is the advantages of use defer instead of *ngIf?

Deferred Loading:

{#defer when condition}
  <app-my-component />
{/defer}

*ngIf:

<app-my-component *ngIf="condition"> </app-my-acomponent>

Solution

The new feature is called Deferrable views.

A deferrable view is wrapped in a @defer{} block.

This allows the angular compiler to transform the static import of the component into a dynamic import. By doing this you bundler will be able to lazy-load the component wrapped by the @defer block.

There are 2 main differences with ngIf or the @if block :

1. NgIf/@if doesn't lazy-load.
2. A deferrable view cannot be reverted. I won't allow you to toggle a component depending on boolean like the if block does. If you want that behaviour you'll have to wrap the @defer with an @if.

You'll have move info on the new docs !

Answered By - Matthieu Riegler