Session, let us learn how to create a component using Angular CLI. The command to create a component is EMG space generate space component space the component name, instead of generate you can just use G. Once you do this command, automatically the component will be created for files will be created for that particular component. Here I am given the component name a sample. For sample, it is creating sample.component.ts which is the TypeScript file, then sample dot component dot html, which is the template then sample dot component dot CSS for styling and also sample dot component dot spec dot CSS which is used for testing. Together with this this component will be added to the declarations part of app.module.ts now Letter fighter. So let me go back to Visual Studio code.

I am in the terminal. Now, let me add the comma empty space, D space component space, I want to create the component that's home component. So let me give the name of home, enter. Now we can see that four files are created, an app.module.ts is updated. Now let me open it. Here I've got a folder, the name Whoa, and open it.

I've got home.component.ts and minimize this terminal. Here, you can just have a look. This is a class which is implementing on image which is an interface. And it has got its own input and its own decorator. In the decorator, we have given the tab name, the template URL and the signed URL. The template URL talks about the HTML page there Cameron's home component dot html wherein we have got homework and again there is a CSS file nothing is there in the CSS file.

Let me leave it blank, there is one more file home.component.spec.ts which is used for testing. Now again if you see this app dot module dot CSS is updated, let me open it. Here you can have a look the home component is getting imported and it is added to the declarations part that will say new components those components will be added to this app.module.ts where in which paths inside declarations array and also that particular component will be imported. Okay. Now what next? We have created a component this component should be added to some part which plays delay added.

If you see in index dot HTML, we are adding a probe so index dot HTML is having the main component app component. So now you have to add this home component inside the app component. So I will open app dot component dot html, within which I will be adding this app home. So this is the HTML page here only are going to add the home component. For the home component. The name is app hyphen home.

I will just show you that. You can see this app hyphen home. Let me just copy this. I'll come to app component dot html. Now yes, I told you you can just choose where exactly you want to add the component. Now I will come out say this this and I will add the component and the jacket app for slash app Whoa.

Let me save this. Next I need to run the application. Again I will open the terminal it is the terminal it is it is available here. Now I can just give empty space, space Wi Fi. Let me press enter. The application has started.

Yes, you can see the output of homework. So the page that you are seeing is index dot HTML. In index dot HTML, you are having the root component app component. That is within the body tag, we have added app component. Within that app component. You have added homework.

Let me just say click inspect. can see I got Welcome to Angular, which is nothing but approved. And again, I got homework, this wall versus within this app route, app route tasks here you tend to see this app home. So inside the body tag, you are having app routes inside this app root you're having at home. See Apple is getting injured, then only out Through this getting in depth. So, this is how you create components in Angular.

In the next session, let us learn about data binding. Thank you.