Deferrable views and it's triggers in angular | angular 17 features with examples | nihira techiees

Hello friends welcome to my channel hereis in this video we can discuss about defer views in angular this is the new feature in angular 17 for doing Lazy loading of any of the content in order to improve the application performance now we can see how to use this defer views in angular application and what are the blocks it's having and what are the triggers it's having we can see everything one by one so now let me go to the application so let me take this app component so we have this router Outlet next let me include one H1 tag also okay see the output so even if I'm refreshing also in this page there is no difference because both are loaded from the initial load itself okay now I'm going to use this defer so the syntax is at defer we can move this router Outlet section in this defer block so let me save this one again we have the same output only if you are clearly noted when I'm refreshing in this H1 tag there is no load difference at the same time in this area we can see some slight difference so the reason is the initial load time it's not loaded after some fraction of seconds only it's loaded okay so the real time scenario is some of the contents are not needed for the initial load that may needed for after some logic execution or after some time period and also some even happening for handling these all the activities we have the triggers okay so let me explain all the triggers one by one for using the triggers uh we can use two keywords one is on and another one is the when first we can use this on my first trigger is idal so this ideal trigger is the default one even if you are not provided any trigger also it will use the same IDE only so anyway there is no difference next we can use the timer I'm going to load this content after th000 milliseconds see the response see initially it's not loaded after 10 milliseconds only it's loaded we can move on the next trigger viewport I'm just commenting this code for the reference vort see we are getting this error the reason is if you are using this viewport trigger make sure we have to use this placeholder block okay so the placeholder block isn't just optional block only but if you are using this viewport then it is the mandatory one so if you want so some of the content or text before loading our exact content we can use this placeholder block let me explain so the syntax is that placeholder and we can provide some content see now the error got resolved see if you are not we can see the placeholder text is coming and it is going very quickly so if you want to see the text very clearly so let me use this timer trigger once again so initially the placeholder text only showing after some times only our content is loaded okay so the next trigger is interaction and just saved one for this trigger will be executed if there is any interaction happened in our component area see now in this initial load it is just showing this placeholder text only so if I'm doing some interaction in this area see the content is loaded okay so next what I'm going to do the same interaction we can apply for the spefic big component like we have this H1 element okay so if I'm doing any interaction in this H1 if you want show our content means I have to include the identifier like this and in this interaction we have to provide this one okay so know it's loaded so even if I'm clicking here also it's not showing anything once I'm clicked in this hstone area see our content is loaded so this is the way the interaction trigger is working next we can use this hover okay so let me save this one see the response see in this initial load again we are able to see only the placeholder text after hovering this H1 text we are able to see the exact content so in case if I'm not providing this identifier value here see even if I'm hovering in this H element side there is nothing happen but if I'm coming to the exact area see the content is loaded okay so we can move on the next trigger immediate so let me save this one one see the response now so this trigger will be executed once all of our application components are loaded it will be executed automatically okay next we can use this when keyword okay so if you want load this content based on some Logics then we can use this B okay so what I'm going to do let me declare one small variable is load content so the initial value I'm just providing false and instead of the on let me use this Ben for changing this value we can use one button and we can Define this function so this start is load content equal to I just saved see in this initial load it is just showing this placeholder text once I'm clicked this button it's showing the EXA content so again if I'm clicking the value may be changed into false but the content will be showing the reason is based on the trigger it will show the data okay it's not like a direct to ngf for doing the hide and show activity it will load the content based on some logic once it's loaded it will be available only okay so next we can see some of the blocks so already we have covered the main block that is differ and then one of the optional block placeholder and also we have two more blocks one is loading for showing this loading spinner okay here we can see some GI loading images so I'm just providing this loading text only okay and one more block that is the error handling not error handling showing the error information the block name is C error see the loading text also there but it's uh closed very quickly we can include some timings so it's having two properties one is after let me provide 100 milliseconds and another one property minimum I just provided one second and also in this placeholder also we can apply the same properties so let me give minimum 1 second and in this defer block let me remove this triggers so in case if I'm changing this into 2 seconds it's taking 2 seconds after that our exit content is loaded okay this is fine and also we can use the combination of triggers and removed this placeholder condition also so in this differ block we can apply the triggers timer 1,000 millisecond see applied two triggers okay so let me save this one so I just loaded see after th000 milliseconds it's automatically loaded even I not clicked this one at the same time if I'm clicked immediately it's not going going to wait for the timer so basically it is working like our condition based okay okay this is fine and the final one is free fetch so here instead of this timer I'm going to use this free fetch see it is working fine so this so this is the way we have to use this freeish synex also so now we have covered most of the topic still if you want to get more information regarding this defer views just refer this angular document okay defer views so here you will get the complete information and they have provided lot of examples also so it's starting from the main block defer so after that they have explained all the blocks one by one defer and placeholder loading and error these are the optional blocks only So based on our use cases we can use one by one add then triggers so in these triggers we have a lot of triggers so for using the triggers we can use this on and when keybard and the triggers are the first one is Idle then viewport interaction H immediate timer and the final one is free fetch you will get the complete information okay so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 1,442

Keywords: deferrable view in angular, angular 17 features, angular defer view with examples, triggers in angular defer view, what is placeholder block in deferable view, viewport trgger in defer view, timer trigger in defer view, immediate trigger in defer view, interaction trigger in defer view, idle trigger in defer view, hover trigger in defer view, on and when keyword in defer view, deferrable view with logical condition, how to use multiple triggers in defer view

Id: y4o-zqHSxDQ

Length: 12min 7sec (727 seconds)

Published: Thu Nov 30 2023