Angular 17 Defer - Improve Performance in Your Application

Angular 17 defer is a new feature which allows us in simple way to improve the performance of the application. Angular 17 defer allows us to load certain component later as an additional chunks based on different conditions.

🛠 Need a video editor?

📌 Social

📚 References

🕒 TIMESTAMPS
0:00 Introduction
0:18 Angular deferrable views
1:07 Angular basic defer
2:46 Angular defer triggers
5:43 Combining defer triggers
6:07 Angular defer when condition
7:01 Angular defer vs ngif
7:58 Prefetch in Angular defer
9:37 Angular defer full notation

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[michaelharrington]

Very powerful feature. Thanks for the explanation

[xxRAPRxx]

Nice video! I take it at 8:50, the Load button does nothing if you press the Show button first because the Show button did the loading instead?

[NunoFreitasBotelhoo]

How about when you have 2 defer inside the same template. Will create two chunks i assume, but how does it know what placeholder/loading/error to use?
Great video!

[LarsRyeJeppesen]

So in a master detail you can lazy losd details bit by using defer a d button click. Insa e

[prabhuprasad]

Hi,
Thanks for the explanation. I have a couple of questions:
1 - Is it possible to revert back to the original state when the condition is undone. For eg - the view is rendered when the code enters the viewport but when the user scrolls up and the the code is removed from the viewport, the view stays

2 - in case the view doesn't get rendered for some reason, can we re-render them somehow?

[anutaNYC]

I have major issue with timing in angular I have a dialog with a form and need to fetch the data for that form before it's opened wondering if this will help.

[ManasKumar-tj]

As angular 17 doesnt have module, how we can handle lazy load module routing ? all the components are stand alone does it impact performance of existing application after migrating to 17 ? any idea?

[exploteldeveloper]

I thought it would be a nice alternative to bypass the ssr but after testing I don't see any improvement yet. I peppered my components with @defer blocks in the hope of reducing Initial Chunk Files but quite the opposite happened. The more @defer I put, the more the main.js file gains in size. It's still very useful for displaying skeletons.

[Anonym_Zx]

Your speech making the lesson a little more difficult to understand

[LarsRyeJeppesen]

@derfer combined with ssr.. does that even make sense?

[asadrahman]

string replace @if (condition) -> @defer(when condition; prefetch on idle) 😂