⚡Angular 17 Defer Block | Angular 17 Lazy Loading | Angular 17 Deferrable Views |Angular 17 Tutorial

[Music] hello guys welcome to my YouTube channel if you're new to my channel don't forget to subscribe like this video and hit that Bell icon so you never miss any of my future videos angular 17 introduced a new defer block that lets you lazy load content based on specific conditions or events in this video you will learn how to implement lazy loading using the new defer Block in angular 17 defer views also known as defer blocks are a powerful tool that can be used to reduce the initial bundle size of your application or defer heavy components that may not ever be loaded until a later time in order for dependencies within a defer block to be deferred they need to meet two conditions one they must be Standalone non-standalone dependencies cannot be deferred and will still be eagerly loaded even inside of defer blocks two they must not be directly referenced from the same file outside of defer blocks this includes viewchild queries defer blocks have several sub blocks to allow you to gracefully handle different stages in the Deferred loading process the content of the main defer block is the section of content that is lazily loaded let's Implement defer Block in angular 17 app I have already installed angular 17 if you want to know how to install angular 17 press the I button and watch the video open a new terminal click on command prompt now type the command NG serve to run your app in your browser type Local Host col 4200 and press enter you can see the angular 17 Page with new angular logo let's create post component click here and select command prompt now type the command NG space g space c space post and press enter here G is for Generate C is for component and post is the component name you can see that all the files for the Post component have been created now open index HTML file and add Tailwind CSS CDN before the head tag as we will use Tailwind CSS for styling our app in the post. component.ts file Define an array named posts which contains three objects each object represents a post with various properties such as title body category author published date and image in the post. component. HTML file I have added a template to display the posts in the H1 tag we display the text recent posts here we use four block to display the post details such as title body category author publish date and image first we display the post image after the image we display the post category then we display the post title after the title we display the post body then we display the author name lastly we display the published date in app. component. HTML file I have added app post selector in app. component.ts file I have added post component in the Imports array and imported the component now open your browser and you will see that three posts are displayed with titles images bodies categories publish dates and author names now let's add defer block type at defer followed by an open and Clos curly brace now add the appost selector inside the defer Block open your browser to see the effect of the defer Block open the developer tools here select fast 3G now reload the page and you will notice some delay before the posts load let's reload the page once more and you will observe the same effect triggers provide conditions for when defer loading occurs when a defer block is triggered it replaces placeholder content with lazily loaded content there are two options for configuring when this swap is triggered on and when multiple event trigger can be defined at once idle will trigger the Deferred loading once the browser has reached an idle State this is the default Behavior with a defer block let's add idle with the defer block add on idle in parenthesis now open your browser and reload the page you won't notice any difference because this is the default Behavior with a defer block now let's see on timer timer would trigger after a specified duration the duration is required and can be specified in Ms milliseconds or S seconds let's use timer with the defer block replace idle with timer and add 3,000 milliseconds in the parentheses here we've used a 3,000 milliseconds timer so the post component will be displayed after a delay of 3,000 milliseconds now open your browser and you will notice that the post component will be displayed after a delay of 3,000 milliseconds let's add a button before the defer Block open your browser and you will see that the button will be displayed first since it is outside the defer block after a delay of 3,000 milliseconds the post component will be displayed let's reload the page once more you you can see that the button is displayed first and the post component will be displayed after a delay of 3,000 milliseconds let's see the next trigger on interaction interaction will trigger the Deferred block when the user interacts with the specified element through click or keydown events replace timer with interaction and in parentheses add load which will be used as a template reference variable with the button add the template reference variable hash load to the button this indicates that first the button will be displayed and the post component will be displayed only when we click on the button open your browser and you will see that only the button is displayed while the post component is not displayed it will be displayed only when we click on the button now click on the button and the post component will be displayed let's see the next trigger on Hover hover triggers deferred loading when the mouse has hovered over the trigger Area events used for this are Mouse enter and focus in replace interaction with hover this indicates that first the button will be displayed and the post component will be displayed only when we hover over the button open your browser and you will see that only the button is displayed while the post component is not displayed it will be displayed only when we hover over the button you can see that after hovering over the button the post component is displayed let's see the next trigger on viewport viewport would trigger the Deferred block when the specified content enters the viewport using the intersection Observer API this could be the placeholder content or an element reference replace hover with viewport this indicates that when the button enters the viewport the post component will be displayed thereafter open your browser and you will see that the post component is displayed only after the button enters the viewport let's see the next trigger on immediate immediate triggers the Deferred load immediately meaning once the client has finished rendering the defer chunk would then start fetching right away replace viewport with immediate and remove the parentheses and load this indicates that it will display the post component when the page finishes rendering open your browser and you will see that the post component is displayed only after the page finishes rendering now let's see when condition if you want to display the post component based on some logic then you can use the when condition let's use the when condition with defer Block open app. component.ts file declare a Boolean property named is loading and initialize its value to false here replace on immediate with when is loading which means that the component will be loaded when the is loading variable is true now add a click event to the button and assign the show posts method to be executed when the button is clicked Define the show posts method this dot is loading equals not this dot is loading this method will be used to change the value of is loading from false to True when we click on the button open your browser and you will see that only the button is displayed because the value of his loading is false when you click on the button the value of his loading will change to true and only then will the post component be loaded reload the page click on elements here you can see that only the button is visible whereas the post component is not visible it will become visible only when we click on the button click on the button and you will see that now the post component is visible if the wi condition switches back to false the defer block is not reverted the swap is a onetime operation if the content within the block should be conditionally rendered and if condition can be used within the block itself now let's see placeholder block by default defer blocks do not render any content before they are triggered the a placeholder is an optional block that declares content to show before the defer block is triggered this placeholder content is replaced with the main content once the loading is complete the at placeholder block accepts an optional parameter to specify the minimum amount of time that this placeholder should be shown this minimum parameter is specified in time increments of milliseconds Ms or seconds s comment out this button remove the is loading condition along with the parenthesis now after the ending curly brace add a placeholder along with opening and closing closing curly braces after the placeholder pass the parameter minimum 3,000 milliseconds within the parentheses this represents the minimum amount of time the placeholder should be displayed add the text please wait within the curly braces this will be displayed as a placeholder open your browser and you will see the placeholder text please wait for 3,000 milliseconds before the post component loads reload the page once more and you will see the placeholder text before the post component is loaded let's display the skeleton component instead of the placeholder text in your terminal type the command NG space g space c space placeholder and press enter this command will generate the placeholder component we will use this component to display the skeleton for the Post component you can see that all the files for the placeholder component have been created open placeholder do component.ts file here I have declared an array named loading cards and assigned it a new array with a length of three in the placeholder do component. HTML file I have added some Tailwind CSS classes to display the skeleton for the Post component here I have used a four block to display the loading cards comment out this code and add app placeholder selector open app. comp component.ts file and add placeholder component in the Imports array and import it now open your browser and you will see that the skeleton of the placeholder component is displayed for 3,000 milliseconds before the post component is loaded let's reload the page once more and you will see the skeleton of the placeholder component is displayed for 3,000 milliseconds and then the post component is loaded you can also use the ontimer trigger with the defer block by using ontimer trigger the post component will be loaded after 3,000 milliseconds and until then the placeholder block will be displayed in parentheses add on timer and pass 3,000 milliseconds as a parameter in the parenthesis remove minimum 3,000 milliseconds along with the parentheses we forgot to add on with the timer here you can see the lazy chunk files of the post component open your browser and reload the page you will see that first the placeholder block will be loaded and then after 3,000 milliseconds the post component will be displayed let's see the loading block the loading block is an optional block that allows you to declare content that will be shown during the loading of any deferred dependencies the loading block accepts two optional parameters to specify the minimum amount of time that this placeholder should be shown and amount of time to wait after loading begins before showing the loading template remove on timer trigger now replace placeholder with loading comment out the app placeholder selector uncomment this code change the text to loading the loading block will be displayed while the defer block is loading open your browser and you can see the loading text is displayed while the post component is loading open developer Tools in network tab select slow 3 3G reload the page you can see the loading text is displayed while the post component is loading reload the page once more and you will see the same effect as before next block is the error block the error ER block allows you to declare content that will be shown if deferred loading fails the error block is optional type head error followed by an open and close curly brace copy this code and paste it in the curly braces change the text from loading to failed to load open your browser and reload the page you will see only the loading block the error block block will be shown only if deferred loading fails we can also use multiple conditions after the defer within the parentheses add on timer 3,000 milliseconds semicolon when is loading it means that the post component will be displayed either after 3,000 milliseconds or when is loading is true until then the placeholder and loading block will be shown uncomment this code add placeholder block before the loading block copy this code paste it here and replace the text with please wait open your browser and reload the page you will see that first it will display the placeholder block then the loading block and after 3,000 milliseconds the defer block is shown now reload the page and click on the button you will see that after loading the placeholder and loading blocks the defer block will be loaded immediately without waiting for the timer now let's see prefetching defer allows to specify conditions when pre-etching of the dependencies should be triggered you can use a special prefetch keyword prefetch syntax Works similarly to the main defer conditions and accepts when and or on to declare the trigger remove when loading with prefetch on [Music] idle open your browser and you will see that first the placeholder block will be loaded and then the defer block will be loaded thanks for watching please like share and subscribe to my channel I will see you in next tutorial till then stay safe

Channel: Php Node Tuts

Views: 1,215

Keywords: angular 17, angular 17 new features, angular 17 defer block, Angular 17 Deferrable Views, angular 17 tutorial, angular 17 project, lazy loading in angular, angular 17 tutorial for beginners, angular new features, angular 17 features, angular project, whats new in angular 17, angular tutorial 17, angular 17 course, angular 17 deffered loading, angular 17 defer example, angular 17 defer loading, angular 17 lazy loading, lazy loading in angular 17

Id: h2rEGoqwr6o

Length: 21min 19sec (1279 seconds)

Published: Sat Jan 27 2024