Angular 17 Defer - Improve Performance in Your Application

Рет қаралды 9,079

Күн бұрын

Пікірлер: 42

@MonsterlessonsAcademy 2 ай бұрын

WATCH NEXT: Angular Interview Questions and Answers - Dominate Your Next Interview - kzbin.info/www/bejne/a3LCin6ii7yAhtEsi=2DCn7yspEAAJ2H6l

@davithovhannisyan7844 Ай бұрын

Good overview! Thank you!

@MonsterlessonsAcademy Ай бұрын

Glad it was helpful!

@michaelharrington5860 Жыл бұрын

Very powerful feature. Thanks for the explanation

@MonsterlessonsAcademy Жыл бұрын

Glad it was helpful!

@xxRAP13Rxx 4 ай бұрын

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?

@MonsterlessonsAcademy 4 ай бұрын

Yes

@austinZen8800 Жыл бұрын

Thanks!

@MonsterlessonsAcademy Жыл бұрын

Thank you so much for your support. It means a lot to me!

@LarsRyeJeppesen Жыл бұрын

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

@bibin24x7 8 ай бұрын

Very good explaination

@MonsterlessonsAcademy 8 ай бұрын

Thanks!

@александпустовит Жыл бұрын

Thanks for the explanation

@MonsterlessonsAcademy Жыл бұрын

You are welcome!

@prabhuprasad3679 11 ай бұрын

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?

@MonsterlessonsAcademy 11 ай бұрын

I didn't try this cases

@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.

@MonsterlessonsAcademy Жыл бұрын

I didn't try defer with ssr yet

@anutaNYC 9 ай бұрын

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.

@MonsterlessonsAcademy 9 ай бұрын

Kind of. But you can do the same without defer.

@anutaNYC 9 ай бұрын

@@MonsterlessonsAcademy I figured it out with subscribe but all these new things I haven't applied yet, and it's scary

@francogutierrez2257 5 ай бұрын

¡Gracias!

@MonsterlessonsAcademy 5 ай бұрын

Thank you so much for your support. It means a lot to me!

@ManasKumar-t2j 11 ай бұрын

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?

@MonsterlessonsAcademy 11 ай бұрын

I already covered that kzbin.info/www/bejne/hHetk4uGa6icb5osi=dXl2xXJGoOik9ZB9

@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!

@Simao-xk1ye Жыл бұрын

In a scenario where multiple @defer directives are used, each @defer should have a corresponding @placeholder block immediately following it. The @placeholder block that follows a @defer block is the placeholder for that specific deferred content. eg. @defer(on viewport) { } @placeholder { Loading some component... } @loading { ... } @error{ error } @defer(on viewport) { } @placeholder { Loading another component... } @loading { ... } @error{ error }

@asadrahman6123 Жыл бұрын

@@Simao-xk1ye i think he meant this @defer(on viewport) { @defer(on viewport) { } @placeholder { Loading another component... } @loading { loading } @error{ error } } @placeholder { Loading component... } @loading { loading } @error{ error } will this work ?

@MonsterlessonsAcademy Жыл бұрын

Simao answer is perfect. You create multiple @defer with multiple @placeholder blocks for each of them. It will create separate chunks for every defer.