Angular 17 Tutorial #15 - How to use 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 joining us from previous versions of angular in today's episode we are going to learn how to use components why is it important because as a beginner or as an expert developer you should know the component hierarchy structure and how to use the components that's what I'll be covering in this part again as part of this series I'm covering a lot of breaking changes that are introduced in angular 17 make sure that you go through the previous episodes especially episode number 12 13 14 in order to learn about the breaking changes in angular 17 today we are learning how to use components components can have parent child hierarchy or can be just used independently we can use the component anywhere in the project there is no dependency of modules in angular 17 I have explained this in detail in episode number 12 and 13 make sure that you go through them so how do you use them so every component will have a decorator component decorator where we provide the selector name and using that we will we can use the component anywhere in the project if you work on any realtime complex Enterprise application chances are that your application will be built based on parent child hierarchy or the component structure basically so let's uh go ahead and implement the code all right before we start writing code and see how to use let me pull up the notes that I'm writing for you all right so this is episode 15 we are learning how to use components all righty okay so first thing if you open any of the components that we created which is under the source app we created few components like crew crew designations flight timetable Etc so let's open crew component.ts this is how it would look this is the component decorator and if you see there is a here we have a variable or you can say a name which is selector all right now this is the name of the component that you would use in the application throughout your application when you generate any new component if you would see there is a common pattern to each one which is app hyphen okay so usually if you when you create which is using NG generate command component name that's what we use to create a component when you do that by default each component each component will have a prefix of app hyphen followed by the component name component name that we have given so that's why this is app hyphen crew designations this one would be app hyphen crew right now if you want to change or customize right so chances are that if you're working on any uh realtime project you would see those things to be there so if you check out the angular.js file you would see something called prefix now this is the line because of which it's adding app hyphen if you want something else let's say You're Building something specific you can make it your own name and now when you generate a component it would be Arc hyphen that component name right so you should know where it is coming from it's coming from angular.js the line number is 15 which is prefix all right so that's why everything has the default name now each component like I said will have a unique should have a unique selector name okay so make sure that you give unique selector name now once you have the selector name now if you go to your say app component. HTML and you can see here you can remove all of this if you don't want but the most basic thing is you will import that particular required component okay now you can import this in the component.ts you can see here now let's say we want to import the crew crew component you import it and copy it and paste it in the list of imports that is what you're importing okay so now crew is available now you can go to your template HTML or wherever you want to use you can just write app hyphen crew that's all you need to do to use it open the select this is the selector name opening tag closing tag right now let's run this application to show you output and I will also show you some variations of component uh hierarchy so if you open Local Host 1400 you can see app component and inside the app Chrome so let's say it says crew work looks so let's go to your app component. HTML and delete everything else that you don't need and let's check the routes if we have that in place and see if it's not overlapping you have the H1 content which is app rout okay that's what it is printing comp app component and let's check where is that coming from so it's coming because we gave the template right usually it is the template URL so let's bring that back crew component and it will not be a template this I did it as part of the example to explain so here you will write app component. component. HTML comma and now you should see crew works because it's coming from App component and there is nothing else here but if you want to add a heading welcome to angular 17 tutorial so you can see here we have the heading and we have the crew Works which is coming from App crew all right now this is how you will use U component name close component name okay that's how you would use in any place in the application now talking about parent child relationship in complex applications you will have something like this let me give you an example let's say you have card right which is a parent now inside this you can have a uh products you can have payment payment can have again net banking or credit card and under products you can have product one product two you can have each product will have its own description can have images can have reviews can have rating all of this think of each one of this as a component all right so you can see cart is the parent component child is products inside this child and then like this this hierarchy basically the tree structure now these are all components and that's how the complex applications are designed again you don't have to create them under a particular each module or separately but you can have each components at the same level generated like these now I'm going to show you a variations where I'm going to use app crew designations inside the crew okay so you go to crew component import crew designations component copy this component put it in the Imports and inside this you can just say app component app crew sorry app crew designations that's the selector name so just copy it and now it says a crew designations component um it's failing let's see why it says the component appears in inut but it's not Standalone okay so this is not Standalone let's make it Standalone okay so now it says appears in Imports let's again let's build it okay so looks like we might have imported it somewhere else if crew template URL crew component. HTML uh app crew designations let's check the name of the selector and then go inside here copy that exact thing and here to close it properly and let's see if the error still exist no it's built so that was there was a spelling mistake so now you can see here crew designation works is also coming so right now I have added crew Destin designations inside the crew component right so which is what I told you the first thing that you can use any component anywhere inside the project okay but ideally you would have the product structure like this okay now you can also so think of this as a parent and child and so on and so forth so this becomes a parent for product one product one becomes a parent for description images reviews rating Etc all right so important thing here is to know that you will have this unique selector name to use anywhere you would just follow two steps okay it's a two-step process twostep process the first step is to import the component into the required component wherever you want to use it right and then you would just use using the component name the tag name the selector name that you provided okay I hope it's clear um do the same thing what I've done create two components try using them make sure they are Standalone and you can use them anywhere inside any component okay okay so that brings us to the end of this particular uh tutorial in the next tutorial I'm going to show you today we created a parent child relationship but important thing is to send data from parent to child and from child to parent which is what we will learn in the next episode which is component Communications right sending data to component sending data back from component to parent so I hope you're enjoying I hope you're learning from the series make make sure that you like and subscribe to my channel also thank you so much for showing love to my channel and me thank you again see you in the next episode

Channel: ARCTutorials

Views: 6,245

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: EZmf0uxBtT8

Length: 11min 39sec (699 seconds)

Published: Tue Feb 20 2024