Angular 17 Tutorial #14 - Standalone Components | Angular 17 Tutorial For Beginners

hi friends welcome back to AR tutorials this is angular 17 full tutorial series for absolute beginners as well as expert developers who are coming from previous versions of angular there are a lot of breaking changes in angular 17 and hence it's important for all of us to stay up to date to know about those breaking changes and learn how to migrate the code to latest versions of angular in today's episode we are going to learn about the Standalone components this is part 14 of the series if you have missed out on the first 13 episodes make sure that you go through them I have covered a lot of details a lot of breaking changes especially um episode number 12 and 13 a lot of things that you would see new so make sure that you you go through the entire playlist in order to master angular 17 today the focus is on learning about the Standalone component first I'll start with little theoretical explanations to give you an overview of Standalone and then we do the Practical and I'll show you how to work with Standalone and also I'll show you how to work with the regular component using modules all right so let's start up with Standalone components Standalone components in angular are components that are independent and can be used anywhere in the application without being tied to a specific module or feature so let me revise it one more time for you till angular 16 we were required to have at least one module in angular applications that was called app module but from angular 17 onwards everything is Standalone which means there will be no modules at all that's also a possibility however if we want we can have modules remember this one line I'll be repeating it till you get it in your head all right so Standalone components are designed to encapsulate specific functionality or features making them independent and self-contained the primary advantage of Standalone components is their higher reusability we can reuse the Standalone components anywhere in the parts of the application without actually being calling the module or being tied it to a particular module and hence the dependencies is less this makes them more versatile and adaptable to different context Standalone components can be integrated into various modules or feature areas effortlessly since there is no much effort required Standalone components are independent and then hence they are very easy to maintain in long run the components encapsulate both logic and user interface elements itself I I showed you that in the uh components tutorial where we generated a component and I showed you that it will have four files template TS spec file and the actual class Standalone components have scoped Styles which means their Styles don't interfere with the styles of other components Standalone components often expose a clear API with well defined inputs and outputs that's the topic for the next episode all right so we know the theoretical um knowledge about Standalone components now so let's go ahead and learn how to generate Standalone components and how to generate a regular normal component let's get started so I am in my let's go to angular 17 folder all right CD angular 17 no such file or directory all right CD learning SL angular 17 and we are building a crew management system and hence this project so if you open this source and the app you are not seeing any app module but I showed this comparison in the previous episode so I'm not going to repeat it for you but remember that there is no app module in angular 17 I I've also started taking some notes so let me open that here for us all right so this is episode number 14 we are talking about Standalone components all righty okay so now first rule I am inside the crew management and you can see under the source right so what I'm going to do I'm actually going to go inside that Source folder app folder and the basic command to generate is NG generate component followed by component name okay that's all you have to write in angular 17 okay it would generate a standalone component by itself now in the shortcut you can write NG generate component component name this is shortcut okay that you can use so I'm using the shortcut here in the terminal you can see NG generate component followed by component name I'm going to say crew okay so it says not found so which means I need to be in the bash so learning SL angular 17 and crew management Source app all right so now I'll run the same command which is NG generate component comp component name is crew and notice that there is no updates to any module it will only generate four things okay inside a crew folder now this is the name of the component we just generated it has a HTML file scss is the style and you have the spec file which is the unit testing file you have the component class which is the main components class in The Decorator you can see here component decorator you can see stand alone is true all right because angular 17 onwards everything is Standalone that means you don't need to have it in any particular module okay now as for let's say you have some dependencies right so you can say Matt button module you can directly import it here like this okay earlier versions of angular you were writing all of this in the NG module okay say be it app module or a particular feature module whatever right now the all the dependencies that this component requires you can directly import it directly here let's say you're working with Services you can add the services right inside providers okay like this so this can take Imports which is basically the modules that you'll work with it will have Pro providers which is basically components or the services template is the HTML template and this will be the style URL all right now this is how you generate a new component in angular 17 I'm not passing any parameter right that's why I said by default it will generate that now let's say you can say let's say crew uh regions okay and I'm going to say hyphen hyphen flat okay now what happens is it will not create a separate folder for you if you use the option hyphen hyphen flat NG generate component name hyphen hyphen flat that means this will create create a new folder for component by the component name like this one you can see here crew it created a new folder by the name and all the files are inside it but if you want it in the same folder you can use the option hyphen hyphen flat okay that's for the new components but let's say you need to have a regular component right regular component means a component which is not Standalone so you will run the command NG generate component followed by component name let's call crew hyphen uh um designations okay and you will write stand alone false okay so that's all you have to write oh sorry you'll write hyphen hyphen stand alone false now it will give error because if you say that you do not want a standalone component then you need to have a one module at least okay stand alone false now if you do that you will need a module for mandatory okay otherwise it will give you this error could not find a NG module okay so for that you will need to create a module you can say NG generate M which is M for module or you can type module and let's call it um crew module crew okay just like that you can call anything that's fine so we just created a new module okay you can see here it went inside the crew module and now you can go and or you can create any uh module by the any name let's say instead of crew I'm going to say flights so it created a new module here right um okay let me delete that spelling mistake take so flights right and now you have the flights module here and what you can do you can generate a component and you can also write the module that you want to specify to it okay but in general remember that let me show you that okay so now I'm going to generate a component which is Standalone and I'm going to mention a module okay that's like I said very very important um uh it's important that without module you will give you will get error okay and to avoid that you need to mention a particular you know um what should I say like you mandatory need a module okay that's the bottom line without which it would give you error okay and you can just go into that folder and generate it that's also fine or you can just mention the name of the module and that will also work so you can see here I'm writing module and then you can give the name of the module okay so I can say flights SL flights. module. DS the same one that we just generated here okay so I'm telling that generate a new component by the name crew designations H hyphen hyphen stand alone is false and it should be inside the module flight slf flight module now it says okay unknown let's see why oh maybe it's not finding the path okay that's little odd uh okay or you can just write module equal to flights it's flight right okay yeah okay and hyph Hy try Hy run unknown argument why is it take not taking okay yeah so all right so now you can see it updated the flights module okay and added the new component so this component that was generated now which is the crew designations um all right sorry so it created crew designations where is that I don't see that one second let's find out where did it go it says it created okay it let me remove this dry run and run it okay so there you go so instead of dry run so if it it will not make changes sorry my bad on that so I created a new component and I injected into a module okay which is flights module okay so this is your regular component that you do you'll just write hyen Hy Standalone false uh you like I said you will need a mandatory module so you will write the command NG generate component component name hyphen hyphen module equal to uh name of the module right module name and that's all you are telling it and nothing much again you have to make it stand alone false and give the module name okay so this is the command that you would run to get a regular component injecting inside a module okay now again you can generate a module using NG generate module followed by module name okay this will generate the module for you so that's all you should know about how to generate a standalone component and I have already covered how to uh if you see this episode um components in angular I have covered in detail about the folder structure of a component because in the next episode I'm going to show you the component communication that is how do you send data from parent to child child to parent okay and then I'm going to introduce you and write modules and then feature modules and bind them all of them together we are also going to learn signals and much much more all right so please uh continue your learning with me uh please do provide your feedback uh if you're liking this series please do hit that like button to show me some love thank you so much see you in the next episode

Channel: ARCTutorials

Views: 5,838

Keywords: angular 17 tutorial for beginners, 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, standalone components, angular standalone components

Id: IKyVgsilFOw

Length: 15min 26sec (926 seconds)

Published: Mon Feb 19 2024