Standalone Components in Angular 15 | Make application without NgModule

can we use a component without NG module we'll see that in this video hi everyone this is subrath and you are watching funny video stick please subscribe to the channel if you haven't yet we all know that angular is designed as module base application or module based framework so where we develop different module combine them to make a full-fledged application but now angular is twisting its way so now we have our own Standalone components so what it means we can have a component without declaring it inside the engine module now you don't need NG module at all so there will be less code to write eg2 lazy load ed2 lazy loader component in the route and lots more we'll see all those in the upcoming videos so in this video today we'll focus on how you're gonna create Standalone component and how you can use that in your application so here as you can see we have a simple angle of 15 application just a bear application created from and the new I will go ahead and add a component and that I will declare the Standalone so for that we can write NG generate component and the component name suppose is login and I will give the flag as Standalone so we'll go to our login component and here in our login component.ts inside our component decorator we have two extra fields which is Standalone is true which means that my component is Standalone and imports each the import like which we have in NG models if you go to the NG model all the Imports like you are using browser modules form modules different modules from another service that all you can import it here apart from that you can import another Standalone component and use it inside and we're going to see that as well I think you guys know this the template URL and style URL similarly you can do this as a template string if you don't want these two best but HTML if your template is very small you can use that as well now I'll check how we can render our login component inside our app component our app component is a simple component is not a standalone one so for this we need to go to the NG module and we can import here login component so what I have done I have just added the app login in appcomponent dot HTML again to just reconfirm I have added a login component inside Imports which are not possible before because we are declaring our component inside our declaration now we can use the component as a module and put that inside your Imports and now go and start the application so here you can see that app component login works so login works is coming from our login component if I go to HTML here this is a login works this is how simple it is now we'll see how it's gonna use a standalone component inside a standard one component so we'll go and create another Standalone component so as our signer component is created soil what we'll do we'll use sign up inside so I'll use login Insight sign up so I will just try it to remove this and use signup component here as you can see I have forgot to keep the tag as a standalone so I will go to login component copy this to tag paste it here now it's became our Standalone component and here we'll try to import login component and we'll go to our HTML and here we'll add app login so as I forgot to add the standard on tag so the signup component is added in the Declaration that's why swing error because now our signup component is a standalone component so we'll go here and remove this one first and as we imported sign up component and we are using login so we need to change that so our application started now if you go to the browser and here if I just try to refresh we are seeing our app component using sign up component and sign insights and a component we have login works so this is what a standalone component is now you can ask me subrat if you have a standalone component now you don't need our NG module to bootstrap our application and all can we use our standard component to boost up our application and the answer is yes you can create a whole application without any NG module at all so what you need to do will go inside our app component and make these ads Standalone components so we go to our appcomponent.ts I'll just add it here and inside this as we are using signup component so I'll just add that to our dependency and now as our app component is a standalone component so it is going to throw an error here so we'll just delete that just for the sake of the video I will just comment the file here and now if we'll go to our application we'll see an error because our application is bootstrapped by our NG module means our app module so to bootstrap our Standalone component angular has given us an method and which is bootstrap application which is from our angular platform browser and inside this our bootstrap component which is for us app component so app component and I'll just copy this from here now we'll just comment this and if you save the application now if you go to our page here we seeing our application without NG module at all so that's the power of Standalone component now think how it can be so it can be as modular as you can think you can create your whole application in terms of Standalone components export them as a component so think like you have a button create that as a component and Export that component to the whole application and as the standard operate will use your standard component by importing them to their Imports array and they'll use it that's all and in our next video we will see about how we're going to Lazy load the Standalone component so please like the video and please subscribe to the channel so that you will not miss further videos so that's it for today we saw what a standalone component is and how you can use that in our application so our application will be more component driven rather than module driven and not really easier to share our component between each other and our life will be pretty easier because you have to write less code maintain less file so please like the video if you liked it please share between your friends family colleague will going to meet in the next video or till that stay happy bye bye

Channel: Fun Of Heuristic

Views: 5,065

Keywords: Angular, programming

Id: 62zkRAYGixk

Length: 7min 10sec (430 seconds)

Published: Tue Jan 10 2023