Getting started with standalone components | new way of routing in angular v15

in this video we are going to learn about Standalone component latest features added in angular v15 and almost everything related to this so that you can start using a standalone component in your project Standalone component means we can create and use component without NG module until now when we create a component we have to update NG module and if we want to use a component of another module we need to import that module to make that component available for use not only component we can create directive and pipe AS stand alone from version v15 NG module become optional for developing an application when I say this instantly a lot of confusion and doubts comes to our mind how we will do the lazy loading how we will import the dependency how we will export the component so that others can use it if it's happening with you then don't worry I'm going to cover each and everything with the help of a small project so here it is like I'll create a basic routes home talks about and also auth slash login out slash sign up so these two and all other routes in angular v15 you can do the lazy load specifically only to a component and a group of components so each and everything I'm going to cover in this video so there is a lot to cover so watch this video till the very end and let's get right into it now let's go to inside SRC folder app and inside an app component so this is a normal component let's convert this into Standalone component standalone true okay now once I save this I'll start getting error like component app component is Standalone and cannot be declared inside an NG module okay now let's remove this from NG module here you can see this is started giving error so I have to remove this and even from the bootstrap now if I remove the from the bootstrap it will show this successfully but when you'll check the output you'll find nothing if I refresh here you can see the blank output okay because we removed from the bootstrap as well so now let's fix it first so because this component Standalone components every dependency we need to import inside this component itself okay inside an array common module first so this will give all the features like NG if NG switch ng4 everything comes from this module so we need to import this and add comma okay perfect now the second thing we want to make this as a bootstrap component so go to inside main.ts now we need to change uh bootstrap applications so this functions you need to import from platform browser this package okay and inside here we need to pass app component so previously what we do we do the bootstrap module right now we need to just do the bootstrap component now we don't need this code here at all and not this we don't need to import the module and even we don't need this package now save this still we are getting error but the error is something different like router Outlet is an angular component that verify include so this component don't know about the router router Outlet because previously what happens we have app routing module and where we have imported the router module as I said this component is Standalone so they don't know about router module so we need to import here router module now save this now here you will see it's compiled successfully now let's check the output now here you can see so this become our app component become the bootstrap component as well as become a standalone component so now we don't need app module even we if you want we can delete this let's delete it okay I have deleted app module let me save this still you can see the output is same right so this is the beauty of Standalone component now even we don't need app routing module that everything becomes optional if you want to change we can change app Dot route dot TS because if there is no module required then I'll change the name as well so I'm changing the name and let me remove this now we need to use app route instead of routes app route and array like this and we need to import this from router now remove this module from here because we already imported in the component level even NG model is not required here now we can pass this route inside main.ts in the second parameter of this function bootstrap application as an object it will take provider inside an array we can use provide router so we need to import this function from angular slash router package and here we need to pass R this route so we need to export from here export and then we can use this routes so let's make it capital letter app underscore let's go here and we'll pass that name we need to import from here and we pass it here now still it will work perfectly fine so we have added a routing also in Standalone component now let's create a folder so I'm going to create a folder because the module concept is gone so there is no need to create a module so module kind of a structure so we can also improve our angular application structure I'm going to create a blog and inside this I'm going to generate one component let me open one more NG generate component block if I generate a component I'm definitely going to get an error because I don't have any module now we can generate the component stand alone you can use both module and Standalone component but here I am just using only Standalone so it's created and now here you can see no logs regarding updating NG module right this component becomes Standalone component this block component now if I want to use this component just for sake of example I'm trying to use this selector inside this app component app component doesn't know about block component because both are independent from each other's so even if if I'll use this I'm going to use this selector here it will say it will it will give you an error because unknown element why because they don't know this component don't know about that component so we can import module directly here and we can import component also like blog component now I can use this selector here it will work okay now let me save this save this as well as this and let's see it's compiled successfully if I'll check the output here you can see blog work means that component is compiling successfully now inside a Blog I'm going to create few more components so let's go here but let's do quickly all other components like here I'm going to create header first inside the blog and I'm going to use header inside a block so again I'll do the same way I did like I'll use this selector inside this block component so again I have to tell the block component about header component we need to import here and then we can use header component here so let it be as it is and I'm going to use header on top of it if I do this save here because I didn't save it here now here you can see header on top of the block component perfectly it's coming now let's quickly design header and then we'll move forward from here I'm going to use the class main container and inside this I'm going to take a nav inside this I'll use UL I I'll use four things here home talk about and finally login right now here you can see it's coming like this now now let me add some CSS so main container can go here quickly inside that I have a nav because I'm using scss so I can do the CSS in this way as well so inside a nav I need a background color I'm going to take darcian inside the UL inside this I'm going to use l i l i tag and list style first of all list style I'm going to make it none now let's check the output here you can see dark CN and also we don't see bullet points so now if you see the gaps from all side because of the default element margin and padding we see here to remove all the default margin and padding from all the elements just go to the style.css here and add asterisk asterisk means all element margin 0 padding zero now here you can see we don't have any spaces from every side now let's make a little better inside UL I'll use display Flex okay so it will come line by line and we don't have any spaces so inside Li padding 20px 40px and cursor pointer color white perfect now let's check okay now when we hover we want to change their background color so for that what I'll I'll use and however background color I'll use has double zero seven zero seven zero a little more darker than CN transition I'm going to add transition all one second perfect okay now I want this login should come here so this is the last last child so directly we can apply on last side margin left Auto perfect so our header is ready now we need to generate all the components uh we don't have any components we just have header so let's generate quickly all the components inside blog because everything will be the child of this block I'm going to generate home doc and about so I did everything inside this block component so I generated about docs header so I want to use everything inside so let's let's create one more file I'll name it blog Dot route.ts now inside this what I'll do I'll I'll do like export put const blog route colon route array and here inside this I'll create all the routes for every components but let's leave as of now and let's create main route main route inside the app route the first shot I want to create a path in the blank I want to load component as we do in normal routing so blog component I want to load this now see this it's compiled successfully now let's go here so this is coming double because of uh because of I use here directly app Block component Also let's remove from here we don't want to use directly okay if we don't want to use directly also uh we can remove this from here and if we remove we can also remove this okay now you will see this block component this is coming from the route we defined the route here and now let's do the lazy loading for all this component uh this will be the parent component and all this component I want to make it child of this so first let's define the route inside the block so all the route of this component here I'm going to Define like path a home if someone is typing home block slash home like this then I'll load component home component in the same way I'll do talks component uh put semicolon here and also I'll do about component let's change the route quickly docs and about perfect now I want to load this all component lazy uh I'll I'll do the lazy loading here so go here in app route now the same way we do in previously like load children right and we need to pass here a callback so load children here I'll use import now dot slash blog slash let me load the blog route here now Dot then and here I have to use m like within lazy loading dot block route perfect so if I do this so by default block component will be loaded and all other component will become the child of this component so inside this I need to use router Outlet definitely and if I'm trying to use router Outlet then we need to import the router module here as well in this component okay so I imported this and now we can use router Outlet just after the header router Outlet perfect we don't see any issue here let's save this as well now by default if I'm not in any route we see this if I'll go slash home then we'll see a route in the same way we'll see Docs docs if we go talks component work here and if we go about say this it's coming so this is the new way to do the routing now let me show you one more default way even shorter way to do the lazy loading previously we do this right dot then and this is the way if we export it default as default let me remove this and make it export default let's make it type here as route array perfect now go here and remove this even I don't need this still it will work see this it's working right there is no error even in the console you can check there won't be any error perfect so as of now we work perfectly we did the lazy load and I created this now let's learn one more thing even we can do a lazy loading with a single component if we want to make this component should load lazy then here what we could do instead of component load component and the same way we do import dot slash which component homecoming right home slash and here we have to use then because we didn't did like the export default so or it is a component so C C dot hat component perfect now still it will work if I go to home see home works and if you go to the network tab here you will see app component blog home is loaded so this will make our application much faster and we have more control over it okay even we could do a lazy load to a component so load component and load children load children we use when we want to load a group of component as a lazy loader so here I have given both the demo and don't worry guys I'll give all the links uh I'll give the link of this article as well as this code so don't be worried at all about now let's come here back again once you do lazy load don't import here otherwise you you are not going to get much benefit of lazy load still it will work guys we don't need import at all here you can see home is working fine right without any error now let's improve little bit UI block component remove this first thing like if anyone tried to go to the blank route like if they don't type anything like I don't type anything I just went so it will go to the blank I want if users goes to the blank route it should redirect to home to this route okay so that by default something will come here so for that here what I'm going to do adding a path colon blank if there is a blank redirect to slash o and path Match full perfect so if anyone types blank it will redirect to home now see this through directly now let's add link here as well so when we click here it should go to the exact specific route header component go here add here router link this will not work if we don't add slash home will it work it will not work at all because we haven't imported a router module here okay so this sometimes become complicated to know that uh that we are getting the error from here so it's better to use like this and in a single code so if you'll get any error they will let you know so now if I go to some other routes let's go to Docs first and if I click on home it's coming okay perfectly it's working fine now in the similar way I'll do for this and this as well here talks here about perfect oh talks about home talks about so I'm getting this three instead of homeworks I'll use Dave and let's make it class container and H1 home home component and here I'm going to add CSS height 80 Flex Center and Center so text will appear on Center perfect okay if I go here if I come to home in the same way I'll do for others as well so I have updated all the component now let's see the output oh talks about everything perfect now let's create one more section like I'm going to create a folder because module has been removed so I cannot tell that I'm going to create one more auth module so here I'm going to create one folder auth inside this I'm going to create two component side auth I'll create login another one is sign up let's also create the route for auth Section so I'm going to create a file auth Dot route.ts and here I'm going to use export default array and as route array the return type okay now here I'll use path login for login component component login component perfect and same with sign up so in the sign up I'll use sign up component these two I did here now let's go to app route add one more route this time I'm not going to use component because both the route will be independent and there is nothing common why I did here like this because in Block component I keep the header if there is footer command also I'll keep the footer in the bottom so in every route header and footer will be the common so there is nothing common in login and sign up that's why I don't use any common component or parent component so here let me make it auth okay now let's go to that specific route which is slash odd slash author out now let's see it's compiled successfully here uh let's first check that in the browser so one more thing I have forgotten let's first add then we will do redirect so if someone types auth blank then we'll redirect them to login page slash auth slash login path match full now here I have imported now let's check the output so if I type auth it will redirect to login and if auth slash I'll type sign up it will go to sine of works here so now we did lazy load as well as separate route now let's do the designing so for the designing I use material so let's go to the official website of material and click here on getting started and copy this line in G add and go to your project and add this here you can see the message the detected are package.json file and they are trying to install this angular slash at the slash material at the rate 15.0.1 packet would you like to proceed I say yes then it will install everything now it's asking for choose the theme so I'm going with the default Indigo pink typography yes enable animation yes so everything installed successfully now let's start using it so the first of all we need to import all the module which we want to use of angular material here so let me import this four module angular mat form field let's import here so either module or component we can directly import here button we need here and also in the same way we need to import this card module everything is coming from angular material so I imported successfully now I can do the designing here class main container and here I'll use MAT card this is coming from angular material I can use this because I have imported this Mad Card module now let's give a class name to this login card and here I'll use mat for field matte level instead of writing everything from my own let's copy this from my previous code I did this in the same way I could do for a password here I'm doing this for the password and in the same I need one button login button let me added the bottom login button and finally one text if I don't have any account so if I don't have any account I want to redirect to sign up how it works like it works if I use dot so from the current route the current route current route is r or slash login if I use double dot means it will go auth login so it will remove login and it will go to the parent which is auth and then it will add sign up okay but this will not work because we don't have router module router module here perfect I inputted this and it started working fine now if I save and I need a little bit of design CSS as well so let me copy here it's very very simple guys I'll give this project in our GitHub you can also clone and you can work on it so just for the designing now one more thing we left guys inside this blog inside the header I need to add route for this login as well so what I'll do whenever anyone clicks here I'll just uh redirect them to slash auth that's all and the rest will auth route will take care it will redirect to by default to the login because we have defined the route in that way if I go here I'm getting issue here maybe I didn't save file let's check here is there any file I don't save yes this one so let's save it okay whenever you install angular material please restart your project otherwise you will see some weird effects like in our project if you have noticed that we are getting some weird uis here you can see this I recompiled my application successfully now let's reload this so here you can see perfect UI right now if I go to this this route it's working if I go to this route it's coming to the login page if I go to the sign up and it's coming to here the only thing is left the sign up page design for that I'm not going to spend much of time because I explained I think everything so you know guys how to do the designing here so I pause the video and did the sign up page design now if I'll refresh this now if I see yep perfectly fine so this is a very basic applications I prepared where I use a group of component to do the lazy load and even I use so here we comes to an end of the video we learn a lot in this video like we started from the bootstrap component then we'll learn about the routing uh lazy load a single component and uh how we could do the lazy load to a group of components so hope you guys have enjoyed this video please like share and subscribe my channel and if you have any doubt please comment below in the descriptions and also give me some suggestions for the new videos thank you

Channel: Technical Babaji

Views: 5,774

Keywords: technical babaji, tarique akhtar, Getting started with standalone components, new features, angular15, angular 15 new features, angular 15, angular routing, standalone components, angular standalone component, routing, angular rout, angular routing in standalone components

Id: c5f8Y2fzZM0

Length: 25min 23sec (1523 seconds)

Published: Fri Dec 02 2022