Angular 17 Tutorial #11 - Generate Components | Angular 17 Tutorial For Beginners

hi friends welcome back to AR tutorials this is angulus 17 full tutorial series for absolute beginners in the last episode we started understanding components I gave you a complete um write up of the important points of components in angular today onwards we'll do Hands-On which is to generate our own components in the application when you work on any existing project or on a new project which is on angular 17 you will need to work and create lot of components that's what we are going to learn in this episode if you have missed out on the first 10 episodes make sure that you go through them in order to learn n Master angular 17 with me especially the breaking changes that are introduced in angular 17 let's get started so today what are we going to do today we are going to do Hands-On and I am going to show you different variations of component generation this is especially important because if you're coming from pre previous version of angular things are different in angular 17 things are different so it's important that you understand it end to end let's get started all right I'm firing up my editor all right so I'm in the project folder right now which is angular 17 crew management system that's what we are building uh which will be a airline crew management system so here today we are learning about generating components all right so the first and foremost thing in previous versions or current versions the command to generate is still the same which is NG generate component followed by component name that you want to give okay so let's say in our folder u in our application we want to generate a component and let's call it um think of a name um let's say crew members is one of the components I want to generate so now you see it created it generated the component and it's updated only four files okay but but if you are on any other angular version Which is less than 17 you would see an entry in module 5 it can be app module it can be any other nearest module that your project has important thing is it has to have an entry in module file in angular 17 the components the components are Standalone Standalone which means they don't need they don't need a module okay in angular 17 we don't have a concept of NG module or app module so if you look at this I created a um a component which is in the wrong place right now so I'm going to go into inside app folder and I'm going to delete this right away and it won't bother because there is no other place which is using it so inside app I'm going to generate the same component and say crew members and you see a new component is created all right now if you open the component.ts of this component you will see stand alone is true okay stand alone is true by default okay that's why you don't need a module but let's say you are working on a previous version of angular Which is less than 17 I told you you will need an entry in module file let's see how that so ideally right now we don't have any module so it should give a error let's see that NG G is for Generate C is for component alternatively you can write the complete words like this or use a shorthand you can just give shortcuts NG NG generate component let's say we want to build crew or say crew Tim table right uh component and I'm saying this is stand alone stand alone false now if I want to make a component by default stand alone false I'll use this options with it which is Standalone false now it will give me an error why because it says it could not find n d module this is angular 17 guys remember that angular 17 does not have app module NG module or anything of those by default because by default everything is Standalone so what you need to do you need to generate a module I'm going to call it app module so now I created an App module right here now you can see it created app module where is that here okay now what we can do is now when you create a component it still doesn't find so I'm going to bring it to the app level okay so now it's right here app module .ts delete this folder some of you may think it's crazy it's not actually and now when I run this command it will make an entry into the app module. DSC here it updated that module if you open this app module you can see that crew timetable component is imported into this component and this component is not standalone by default okay so important thing here like I said by default the command that you will use is NG generate component component name if you're using angular 17 in angular 17 components are Standalone by default in previous version s they are not Standalone by default okay to make it um if you want to disable to disable default stand alone you will run the command NG generate component component name hyphen hyphen stand alone and false will be the value but like I said if you are on any previous angle version you will need a module that it needs an entry in okay so remember this basic things now what is the other way we can optimize you can if you don't want your angular application to be default Standalone component right so inside the projects inside the schematics you can add an entry and say stand alone false okay so remember if you want all the angular components to be default not Standalone you can make an entry here by defa by default they're all true that means by default it will be generated true if you don't want them default you can make it false in angular.js also okay that's another provision I'm providing you so you should know that there are different options available and we should know that why something is used right adding to schematics and disable Standalone equal to false in angular.js this is another way that you can make it default Standalone as false okay so important thing that you're learning today NG generate component component will generate in angular 17 it is Standalone by default you can see that here in crew members that we generated Standalone is true in component where you don't want it to be Standalone you will need to provide a nearest module at least one module otherwise you will get an error wise you will get error okay I hope this is clear I hope now the concept of generating angular components is clear in both angular 17 as well as in previous versions okay do write to me if you have any questions or uh feedback or any queries that you have in the comment section I'll be more than happy to help you okay in the next episode I'm going to talk about the angle component architecture for the project that we are going to build which is a crew management system I'm going to generate lot of component inside this I'm going to show you the thought process that I will use to generate the components and that's how we will ALS so start working on a realtime project in this particular series I'm trying to break down things for you to make it easy to understand easy to follow and easy to start learning along with me remember the best way to learn is to start coding with me so if you see these notes pause it pause the video for a minute go through the notes do the steps that I have done run the commands I have run in order to learn and master all right that being said thank you so much for joining in this episode once again thank you for liking the videos showing me so much love to me and to my support uh for the Channel please continue doing that and I'll see you in the next episode we'll learn about the component architecture of our project thank you

Channel: ARCTutorials

Views: 9,561

Keywords: angular 17 tutorial, angular 17 tutorial for beginners, angular 17 crud, angular 17 features, angular 17 full tutorial, angular 17 complete tutorial, angular 17 live project, angular 17 project, angular 17 crud tutorial, angular 17 best tutorial, angular 17, angular 17 signals, angular 17 defer, angular 17 components, angular 17 templates, angular 17 course, angular 17 full project, angular 17 routing, angular 17 crash course, angular 17 ssr

Id: uOQLpBzzFww

Length: 10min 18sec (618 seconds)

Published: Mon Feb 05 2024