we can create a new component. Why? We need a component? I mean what is this thing actually you know, angular or any javascript or typescript framework frameworks are actually modular is the module based. So you need to create different modules for different things. For example the component or sorry, the hitter can be a different thing, the header or the footer, the buttons, the navigation, the sidebar, everything can be can be from a different source and you just combine them in a single module. In a maid module you can say. So we call them component here. So how you do it first. You need to create a component. I'm going to create a header component. You would know how to create a header component and absolutely. Then you would do that. I'm gonna go to the terminal and in the terminal let's load things and then clear. And now here I'm going to create a component. Um N G generate. This is the uh the command and then N G generate and I need to write component because I want to generate a component. And then what's the name of the component? It is better. And just press the enter key and then it's gonna create a new component. Okay uh Yeah, sorry. The generated command requires to be run in a in an angular project but a project definition could not be found because we are in the in the main folder of angular which actually has the angular app. So we need to go to the angular at first. So angular app. Now we're inside the angular application and here I'm going to create the same thing, N G um generate difficult component and one more thing I'm not gonna just write the better because if I just simply write the header, a new component will be created inside this folder directly. I don't want the new component to be generated directly inside this folder. I want a new thing. I want the components slash that means I'm doing two things. I'm gonna I'm generating a new folder and then in that folder I am simply creating uh a new component. So if this folder exists already which is not so this folder will be created but if it has existed exists already, I mean when we are going to create any new, any next component, so we still do the same thing and because the folder is already exist, uh the command, just going to create a new component inside that specific folder. I'm gonna press the enter key again and uh in degenerate component components behavior come on, it shouldn't take this much longer. Why? It is taking so long. You didn't do anything wrong? Okay. It's created anyway. Okay. Yeah, you can see that this is a components folder. We just we just got it here. If I go inside there are certain files and those files are actually mentioned here that, you know create, create, create, create and update. I'm going to talk about it uh create means this file is just created, header dot component dot html, header dot component dot spec dot t s. We do not need these pac file because we're not going to run any test thing or anything. So we do not need that um header dot component dot t s Hello dot component dot CSS We already had a discussion about it that the component consists of four files, actually three files. The header dot component dot es. This file is the base of the brain of the whole component. This file the dot html file is the, you know, the view of the file of the component and this file the dot CSS file is the style sheet of the of the component but one more thing update it updated something SRC app app dot module dot es. So we need to go to the SRC app app dot module SRC f. And inside this folder there should be an app dot module dot t s, which is this. So um we ran the command which actually created few files and updated this file so what they updated actually they imported the hitter component here. You can see that the header component is right here, components, header, header dot component. So the T S file is being imported in this file in this app dot module. So and it's also in the declaration of the energy module. So you can see that the hetero component is also here. So let's say you want to create a new component but you don't want to, you know, use this method, the command line, you can also create these files individually. One by one, you can create the html file DTs file, the CSS file. We do not need the aspect file by the way. So and then last but not least you have to go to the update. You have to go to the app dot module dot CS. And you have to update this file by adding the component name in the declaration and importing the component itself This way, pretty much explained, I'm just canceling all this and this is the T s file. This file first of all has the declaration, you know? Uh this is the, you know, selector. The selector is the app header, the template. Ural and this tile We've already talked about this and then the component, the component class. Actually the class name is header component. So as we saw this here while importing, we imported the hetero component which is um the name of the class. Then the constructor function which is absolutely will be called upon the calling of the class and the N G on initialized initialized N G on I N I T. This method actually, you know uh works right after or you can say executes right after the initialization of the component. It's a life cycle. We will we will talk about the this later separately. So no problem. Anyway, um we can cancel that here is the simple the html file which has the heater works and this is the CSS if you want to decorate or style this file the html you can put anything here, you know that and we can delete this file. We do not need that anyway. Yeah, we do not need that. Okay. And now I think uh one more thing simply go to the app dot component dot html. And here we were already have we're calling the heading. Just go inside and call header this way because this is the name of this selector. This is the selector of this component header so simply called header and whatever we have inside this component and it's html and CSS we will get that in this component in the parent component which is app dot component dot html. As we know that. To call any component anywhere. We have to use the selector. So I'm using this selector here. Inside this app component. So let's just save it. Let's just go there and and g serve um angular app. Sorry I wrote a wrong thing. It shouldn't be any server. It should be energy serve. So I'm calling it again um claire N G served. Sorry first cd angular app. N G serve angular app go inside and I'm gonna get that up and running. It is generating the necessary file building the development environment and then we are going to get that in the browser. Okay to spinal, let's just give it a little time. Yeah. Mm mm mm mm mm mm mm mm mm mm mm mm mm mm mm mm mm mm mm mm injury sir. Okay. It's generating the browser, application bundles and everything we needed. Mhm In the, in the header dot component dot t s You can do the same thing. You can see that the template ural and the styles you're really here. You can, instead of writing this, you know, you can directly put the um the the tags and you instead of template you're in you can just go with the template. We talked about it earlier anyway it is, it is here it is live now and I can open it. I do not want to open it here. I want to open it in this browser anyway. You can see that, the introduction and then heather works so we got it, we got this, the header works successfully here. I mean the, you know, the two components in one window and the another component is being called in this uh the actor component, the dot html. So that's how it works. And I think we just had a good discussion, pretty much explainable in the next video. We're going to continue this. Children stay tuned