Deferrable views in angular | Angular 17 | Angular updates and features

hi guys this is aumar Cada in this video we will learn about diable views and diable Views blogs and their triggers so these are the new features which came in angular 17 and these are still in developer preview but I want to give you a complete details about diable blocks and the diable triggers so let me quickly jump into Visual Studio code and we will see what are the things which we want to learn in this particular video so in my previous video I have explained about angular 17's control flows and I will provide the link in the description you can see that which came in angular 17 and that is also still in developer preview but you will be getting a glance of how to use that new control Flows In angular 17 so now let me go into the visual studio code here I created one readme file where I'll show you what are the things which we will cover in this particular video first thing is we will cover blocks so what are the different blocks which are provided for differ views and what are the cases which we can handle by using diable views and these are something like triggers so whenever you want to show that particular deferred component then you can write some Triggers on it triggers are something like conditions when to show it and when to hide it or when to load it so type of loading a particular deferred view at a particular condition that conditions may be anything that may be on viewport that may be on a timer that may be on interaction that may be on Hover that may be on idle and that may be a combination of different uh conditions that is what we will be learning in this differ views so it would be a lengthy video please try to understand in a proper way and see from end to end of this video so that you'll get a complete glance and overall view of using def views in angular 17 and this makes your application highly performative because you will not load all the components at once so that's the advantage of using defer views so first we'll talk about defer views in general what I'll do is I'll create a component for us so let me quickly go into the terminal so now let me create a child component for us NG generate component and the component name is child component and use skip hyph tests and enter so now it created a child component for us and let me go into our app. component. HTML and inject this particular child component as I mentioned you in my previous video I am using angular 17 and I want to go only with the Standalone which is a default usage of angular 17 features so now what is this component let me go into this component it is a standalone component hence I have to import this in our app component to use this particular selector let me go into app. component. HTML and just put it over here so now this is our child component which I have imported in our app component and hence I can use this particular child component in my app. component. HTML app as a selector so let me go into the child component and get that particular app child and put inside our app component now let me go into the browser and here let me reload so what happened here let me go into inspect and if you see the source the two components has been loaded for example here you can see app with the child component it is already loaded into our Dom and if you go to the network and just reload this you will be getting all the chunks and this whole chunks will be related to main.js and if you see the chunk here it is related to app component and like that we have all the components which has been loaded now let me go into the source so here actually speaking if this child works is a component which is at a end of this screen that means let me consider you have a component which is end of the screen which is not visible to the user why we have to load it that cases we don't need to load that particular view in that cases we can use differ concept so we can differ that particular component and load a bit later that we will be showing in this particular video so let me go here first thing is we'll learn about the blocks so to make this component as a defer so we have to use something like at theate differ is a keyword or it's a block of statements where we can put our defer views so let me put here and the default behavior of this differ block is Idle whenever your browser is Idle it will try to get this particular component and load in our Dom so let me go here and let me show you the network and if you see let me remove this first and show you something which is interesting so let me use normal component and if you see all the chunks has been loaded and there is no chunk related to the child component so actually speaking this child is not a chunk over here because it is not lazy loaded this can be lazy loaded in two ways one is the routing and one is by using defer views and this is not having any route hence it will not be having any chunk but this is not a differ so hence we will not have any of the chunks but when I put this particular component inside this differ block there will be a chunk which is created for this app Child by angular itself so let me go here and you can see let me reload this and you can see there is a chunk which has been loaded and that chunk is child component chunk that means it is created as a lazy loaded chunk but you can say what is the difference both are loading at once actually speaking let me go with a another aspect where we will be slowing down our Network you can slow down your network by using this particular option like slow 3G and let me clear this off and let me Zoom a bit on the console and let me reload now what will happen is the application will load very slow the first one is this one will be loaded and you can see this has already been loaded but the child is not loaded yet now it is loading why because let me zoom out a bit so Here If You observe please Target on this network call let me reload this you will be loading all the chunks once all the chunks are success then only it starts a new chunk you can see here all are done and then it started the new chunk and it is loading that child component that means whenever my browser is free or my browser is idle and it is not doing any other work then it will try to load this particular defer components so that means whenever you want to load some components after certain period of time and that is not immediately used in our UI then you can use this defer views and by default it is view on idle that means it will fetch this particular component only in the ideal case whenever it is not doing any work it will be ideal so it will go and get that particular child Works component now what's the problem over here let me reload again here the the person who is seeing this particular UI he will not think that there is a component over here why because we are not show the indicator then we come across another block called as placeholder so let me go into the placeholder block let me write a placeholder block where you can write any of the HTML let me write a paragraph where I'll say that it is placeholder loading or placeholder dot dot dot save this you can write any of the placeholder like UI with the circle or you can write any of the loaders whatever you want you can write for now I'm using a text here so you can see let me reload for the first time it will load only angular 17 by the time it loads child works it is trying to say that it is in a placeholder mode and then it started working with child works so let me reload again here you can see whenever this chunk is in pending then you are showing that placeholder you can see here the chunk is not loaded it is now loaded and now it is shown over here so there is a small small friction which will happen if it is in a proper mode let me go into no threat holing and that means the Speed network the actual speed of my network let me reload this you can see there is a flash happening over here the placeholder is loading and then immediately it is going to the child works that is like a flickering type of thing is happening over here for that sake you can say that even if your component is loaded and is ready with you before showing that component I'll maintain some minimum time so minimum of let me go with 1000 milliseconds that means 1 second after 1 second only your child component will be visible so now it is reloading so 1 second it is waiting for 1 second and it is showing even the component is completing over here if I make this as 5 seconds and save this you can see or concentrate on this chunk the chunk is already loaded but you are still showing the placeholder because until it reaches 5 Seconds even the chunk is loaded then this placeholder will be visible and until unless this minimum time is completed so you can give some minimum time to avoid the fluctuation so for that sake what I'll go with I'll use millisecond that is 500 milliseconds now the def chunk is started loaded but you want to show a some other indicator where that component is loading so what I can do here is I'll use at the rate loading there is a block called as loading block what I'll do is I'll use a paragraph and I'll make it as loading and dot dot out what is this loading loading is something when your chunk is in progress with the network then you will be showing this loading part so till it starts the network we will be showing the placeholder once it starts the network we will be showing the loading indicator let me go here and let me make it as slow 3G and let me reload now you can see till this chunk triggers over here it is placeholder once the chunk triggered here it is loading and once the completed chunk then it is showing the child works please concentrate on on this particular chunk so that you will understand in a better way so let me reload again so now try to understand the chunk is not loading then it will be showing a placeholder and once the chunk starts it shows the loading indicator once the chunk complete it shows the actual component so that is about your loading and placeholder and this loading may also give a flickering effect so let me go in no threat tooling and let me reload this now it is showing a placeholder and you are not able to see that loading indicator itself if you go here and reload placeholder and it went to child work that means within 5 Seconds itself it is trying to complete its particular placeholder logic so what you can do is you can give when to start I want to start after 100 milliseconds there is a keyword called as after when to start this loading indicator that means I want to start after 100 milliseconds and I want to maintain this till 1000 milliseconds so that it should be always greater than your placeholder value if if both are same then it will be ready with your component and it will show your component instead of showing this loading indicator so let me go here and just reload now you can see a placeholder and child works it is very fast I me go into very slow 3G and let me reload now you can see a placeholder and then a loading indicator and then it will wait for half second and then it will be showing you the defer component first placeholder will wait for 5 milliseconds and then your loading indicator will will maintain 1 millisecond and then it will go into the defer component so these three blocks will be helpful whenever you want to load a defer component and to avoid your flickering and to show some UI to the end user this will be very useful so that's about this three blocks and the last block is error block for example you started loading the component and due to some Network issue the loading of that component has been broken then you have to show an error then what is the block which we can use the block is it is error block so we can write an error block where it will show that something went wrong or you can show any of the error something went wrong please try again so let me save this now there is no error hence it will be going to the placeholder loading and defer component now what will happen is I'll make this briak so for example let me reload I'll be very fast on this so now whenever it is showing loading let's break this offline so now it went to something went wrong because this chunk has been failed Whenever there is a problem in that particular component or if the chunk gets failed then you will be showing an error block so error block is used to show a particular component is not loaded into your Dom so that helps us to show our error conditions so we have four blocks which we can use in our application so let me show you error block once again so let me reload this now we are in offline mode let me go into slow 3G and reload now your angular 17 will be loading first then placeholder then it will go into de loading let then I stopped this so by the time it stops the network it has completed the chunk so you are getting an expected value so let me go to slow 3G again reload this and now let me go into offline whenever it is in the placeholder so I'll go into offline now loading will not be there and hence it went to something went wrong because the chunk has not been loaded this is about your error block now we will Target for different aspects of this differ views so now before doing that what I'll do is I'll create something like a div with a style of margin top and I want to make this margin top as some 500 pixel so that it will go down the defer component will move to the bottom of the screen let me go here and reload now you can see there is a chunk which is loaded because we are using on a prefet concept so now what we will do is I'll write some conditions for this differ that means we will be writing some trigger points when to trigger this particular defer component so let me go into readme file first thing is we'll Target for on view Port there are two things one is on and one is when so let me go into the on view Port what is meant by viewport that means the UI which is visible to the end user that is called as viewport in this case let me go here if you see let me reload if you see this is the only viewport which I am able to see and the remaining part the defer component is under this particular screen which is not visible for us so when I scroll down let me clear this off when I scroll down then we will be going into viewport of that particular component and it starts loading let me go down you can see there is a chunk which is loading over here and it also goes with placeholder loading and everything so let me show you that as well let me go here reload first it didn't load that chunk if you see this is not the child component chunk let me clear this off let me go with the slow 3G and now what I'll do is I'll move this cursor below or down the screen what will happen is then that component triggers to load so let me go here and the chunk is getting loaded and then you are getting a child works so now that's about your on viewport and for this on viewport you can also provide some set of template references that means if that particular template reference is loaded then it will start loading so how can I do that that is the second approach which we can do this is the template ref so what I'll do is let me go here and let me create a div and let me give a hash let me use template block and this is template block and if I providing this template reference for this viewport what it will do is it will wait until that particular template block is loaded into your viewport that means once you are able to see the template block then it starts loading this so let me go here and let me go here let me go into the no threat toing and just reload now it will load all the chunks except the defer chunks and you are not seeing that particular template ref so once you start seeing that template ref let me go down slowly and once it reaches the template ref and I'm not seeing that so let me check the console okay there is an error during hydration angular expected but found command okay so what I'll do is just I'll make a paragraph for this save this and now go here let me see whether the UI is loaded or not you can see template block is loaded now what I'll do is let me reload and for the first time the template ref is not loaded and it is still waiting for the defer views so what I'll do is I will make this as slow 3G and then I'll start moving down once the template reference gets loaded the chunk call will happen in your network so now the chunk call happened because it came into our viewport you can see here and then this particular chunk will be called let me make it bit speed so let me go here no thre toing reload and let me go up clear reload now clear this let me make it as slow 3G and let me go fast yes you can see loading and then the child Works component that means till that template block is loaded you are seeing that particular loading and a placeholder values for our template block so that's how you can use your template block for viewport that is the second scenario of triggers third scenario is on timer that means you can give a time for this port to load for example let me go with on timer and you can provide some set of timer on this so let me give some timer like five seconds save this after 5 Seconds it starts loading so let me make this no threat toing and so let me go here reload see here you are seeing placeholder and child works it is bit speed let me go with slow 3G and let me go here reload now it is showing loading and then it is showing child works you can see here placeholder and then still it is placeholder why because after 5 Seconds it is going to the Loading part and then it is showing so that is what I want to say here the timer is something like it will wait for 5 seconds let me do one thing I'll just commment this because we already done with the viewport so let me go here and let me keep no thread holding and reload so let me reload now you can see it will show the placeholder it started the placeholder is still available after 5 Seconds it will trigger the chunk over here you see here a chunk has been triggered let me make it as slow 3G and let me load this chunk will be loaded after 5 seconds so my loading started and after 5 Seconds the chunk will load now 5 Seconds has been done and the chunk loaded and you got the loading along with the defer component so that's about your timer you can give some set of time and after completing that time this starts loading by the time it completes this 5 Seconds it will show the placeholder value if you don't give this placeholder value you will be seeing an empty block over there so always the placeholder is the recommended one which will be shown when there is an ideal fetching or timer fetching values so that is about your on timer next one is on interaction that means interaction means clicks or Mouse hovers or Mouse movements so that comes under the interaction so what I'll do is I'll start using this interaction part interaction save this now go here and reload let me go into no threat alling reload so what will happen is it will show placeholder itself until unless you interact with that particular block let me go and click on this then it started loading so that is about your interactions so interactions are something like whenever you go into that particular component and click on that placeholder then it will be showing you so that is about interaction and intera can also be done with the other elements also for example I'm using a template ref block this one I'm trying to use this block save this now what will happen is if I click on this placeholder it will not do anything but if I go and click on this particular template block it starts loading so that is about the interaction on a template reference that means you can give any other template reference on that particular template reference if there is any interaction then this defer component will be loaded loed so that's about interaction and interaction with the template ref so let me go here there is something called as onow so let me go and give on H trigger how it works hover and save this whenever your mouse moves onto that particular placeholder then it will start loading your chunk let me go here and come here so you can see the chunk has been loaded and you are able to see that defer component let me reload again now I'm not Hing on this so let me go here clear this and let me move my Mouse onto the placeholder now it loaded the chunk that is about onover and you can use this onover with other template ref also so let me pass this template ref here so let me go here and you can see the placeholder if I move my mouse onto the placeholder nothing happens if I move my mouse to the template block it started loading that means you are hovering on this particular template block to load this defer component so that's about you are on how with a template ref there is something like on idle this is the default one as we know that whenever the browser is not doing any of the loading stuff then it automatically loads in the background and keep it ready for us so that is about on idle and prefetch on idle so what we will do is we can write the conditions for this for example I'm using on interaction already there is an on interaction over here it's a combination so on interaction I want to interact with this template block or pref on idle so I want to get it on idal case that means either you have to interact or when the browser is Idle it automatically gets this let me go here and clear this off and reload so what will happen is I'm not hovering anywhere but the chunk is called in the background so you can see child component called and this is like and condition it is already prefixed but when you interact with this particular template block then it shows that means it is a combination of both you will be loading in the background but that will be shown only on the interaction so we are prefetching that means we are making our component ready in our Network and whenever you interact with something it will show like this you can prefetch on any of the condition that may be idle that may be on viewport that may be on any of this how so you can write any number of conditions for that prefetch so that is about prefet prefet can be combined with any of this particular particular trigger points and there is something called as when condition so how to use that when condition let me go here let me remove all this what I'll do is I'll create two variables one is first number is equal to 10 and there is one more thing called as second number is equal to 20 so now what I want to do is I want to create a button so I'm creating a button and here on click that is Click event this click event should update value and let me copy this update value go here put it over here and now this do first number is equal to 30 on clicking on that button I want to make this first number as 30 and this is something like update first number and now my condition is a greater than b and that should be having a when trigger point let me save this go here now let me see property a okay we don't have a property we have first number let me go with the first number and then we go with the second number so for the first time the two numbers are 10 and 20 hence 10 is not greater than 20 hence you will not see that defer component let me go here it is still showing a placeholder until you click this button the condition will not satisfy and always you will see this placeholder so let me clear this off let me click on this and you can see the component because on clicking on this component I'm making that first number as 30 so 30 is greater than 20 hence it will be showing that particular component that means when clause and you can combine this when Clause even with on view Port as well like this on view port and when condition it is something like either this condition should be satisfied or it should be on the viewport so let me go here what I'll do is I'll write the same condition I'll use on view port and this time I'm using a viewport with this template block okay when this template block should show is after this particular margin of 500 let me go here and now it is still update first number and it is still a placeholder the chunk is not loaded if I go down the chunk is called and the chunk is shown that means on View Pet it is working let me cross check with updating this first number let me update this first number even though it is shown that means you can write couple of conditions where particular defer component can be loaded on viewport and then we are checking when condition that means whoever are first triggered or whichever the condition satisfies it starts loading this particular components these are the combination of triggers you can combine any number of triggers together by giving a semicolon separator and that will be acting like an R condition so it will always go with the r condition you may be asking then how it worked on on interaction and prefetch on ideal whenever you using a prefetch it is something like the components are loaded in the background just for the Network hall and making your chunk ready only for this purpose you are doing it if you are doing on interaction first then it will not go into the prefetch the prefetch is in idle and your components are already loaded and browser is not doing anything and you you have not interacted with any of the interaction triggers then this fetch will happen in the background and it will make your component ready and then it will be showing your particular component because the component may be small or may be a larger component it depends on how the code we wrote so that's why it may be taking some time to fetch that particular JavaScript component files into your UI part so that's why these defer components helps a lot to manage your content to load your particular components at any point of time by showing some set of loading indicators so for example you may be getting a question why to write this when to write this okay you have a table called some API and API is rning some set of data in general how we handled before angular 17 is we use to keep that particular component inside the if condition and we use to restrict until we get the data and we use it to show some other placeholder with some other set of condition and whenever there is a failure in that particular component we use to get a runtime error instead of doing all that stuff we can handle all this by using defer comp components and we are managing a particular component or a particular section to load in a lazy format whenever we want to load that in a lazy format of course it it improves the performance on loading of the application so there are many benefits of using defer views and try to go through this video couple of times so that you will get a brief understanding of Def views and you can experiment all these trigger points in your particular application if you have any doubts please put in the comment section hope you like my explanation if you like my video like share subscribe to my channel for more updates signing off thank you

Channel: Techshareskk

Views: 438

Keywords: deferrable views in angular 17, deferrable views, deferrable blocks in angular 17, angular 17 features, angular 17 updates, angular deferrable views, lazy loading in angular, deferrable view triggers, deferrable blocks, placeholder in deferrable views, blocks in deferrable views, triggers in angular, triggers for deferrable views, angular 17 tutorials, angular 17 new features, angular 17 beginners tutorials, angular 17 end to end tutorials, defer views, defer blocks

Id: CzyAiAYCBJ0

Length: 28min 39sec (1719 seconds)

Published: Fri Jan 19 2024