Angular 17 Defer block: Create Lazy Loaded Material Tabs UI with `when` trigger!

#Angular #Defer #Tabs
Learn how to create a lazy loaded material tabs UI in Angular v17 using the new defer block with the `when` trigger. It's really powerful!
Code on github: github.com/thisiszoaib/angula...
Want to learn how to create a full stack application with Angular and Firebase? Grab my new course 'Angular Firebase Authentication: Create Full Sign up App' with 50% off here:
www.udemy.com/course/angular-...
Follow for more Angular tutorials, tips and tricks:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Cheers :)

[@CodeSample360]

It helps me to understand. Thank you.

[@ZoaibKhan]

Glad it helped! ☺️

[@bishwadeepghosh9140]

how a standalone component will be lazy loaded in angular 17 based on routing, like we use ng module as of now, and if we will use ngodule only what is the use of standalone components

[@ZoaibKhan]

It's much simpler with standalone components. There's a new function called loadComponent which you can use directly in your routes. Link to official docs: angular.io/guide/standalone-components#routing-and-lazy-loading

[@Humppakarajat]

Great video mate! Unfortunately @defer only works with components which are part of your application. It does not work with components which are located in a library.

[@ZoaibKhan]

Thanks :) Third party components will be deferred if you encapsulate them in your own component. I recall I did it in another video with the KZbin player package! If I'm not wrong, the components to be deferred need to be standalone - maybe that is the reason

[@pranavjadhav1136]

Hi mat tags are not working.

[@ZoaibKhan]

You mean mat tabs?

[@meghadeshpande6806]

can @defer replace lazy loading modules?

[@ZoaibKhan]

Defer is meant to be used for component level granular lazy loading. Route level lazy loading can be done with modules and components both. If you're thinking of replacing lazy loading of modules, then look towards the lazy loading of the parent component by using loadChildren in the routes file.

[@meghadeshpande6806]

@@ZoaibKhan thank you very much. Understood now.