Creating Angular Component
Tags: angular, beginners, typescript, programming
Published: 2021-12-17 22:03:18

**T**oday we will learn how to create Angular Component from scratch as well as using the CLI command.
If you are not familiar with Angular components I would highly suggest you to read the linked document [Understanding-Angular-Component](https://dev.to/anubhab5/understanding-angular-component-2bpa)
Once we create a project we have the following files under our app folder 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9pv7ay6z0nbq8a31eke.PNG)

**Step-1** Create a folder under app and lets name it `home`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zbefi21ese9ipda87g3.PNG)

---


**Step-2**  Create a typescript file named `home.component.ts`and a html file named `home.component.html` under the home folder (just created)

---


**Step-3** Write the below code in the `home.component.ts` file
```
import { Component } from "@angular/core";

@Component({
    selector: 'my-home',
    templateUrl: './home.component.html'
})
export class HomeComponent { }
```
Already we know what each line means. If you feel you are not aware of the above code please go through the above mentioned link. 

---

**Step-4** Write the below code in the `home.component.html` file
```
<h2>My First Component</h2>
```
---
**Step-5** Register Component in Module
Now we are done creating our component. In order to use the component we need to add/ register the component in a module. I will talk about modules in greater details later point. As of now you can consider module is a logical block where components needs to be added in order to use.
So we register our newly created component in `app.module.ts` (this module is provided by the Angular team along with the first component).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds0bnpt7r7etgi91sn2a.PNG)
Arrow marked in white is the file you should be looking for.
We will add our HomeComponent in the `declarations `array marked with yellow arrow.
At this point you must be wondering what should I add???
So we should add the class name of our component. Remember what we gave? Correct `HomeComponent`!!!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhwj8ufj10iar6rnaquf.PNG)
So we put a comma **,** after `AppComponent `and write `HomeComponent`. You might get a red squiggly line like below - 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q42kc3j5sap23mb1g2am.PNG)
No need to worry. We just need to add the path of this file. On the top you must have seen few lines written whose starting word is `import`. Like that you need to add another line after `AppComponent` providing the HomeComponent path, like below -
```
import { HomeComponent } from './home/home.component';
```
Once you add this line the error must go away.

---

**Step-6** Use the component
So we are done with component creation, registering the component. Now the last step is using the component.
lets use the component in `app.component.html`
Open the file app.component.html and write the selector name we gave in the form of tag/ element.
```
<my-home></my-home>
```
Now start the application and once it starts lets navigate to localhost:4200 in your fav browser. You must see an output something like below - 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mrobecx52pk2yemrt0s.PNG)
Congrats!!! You successfully created your first component...

Now the above process is really longggggg. If you miss any single step you will get an error. So the Angular team provided us with a command (CLI - Command Line Interface) that helps us creating the component at ease.
Open your command prompt at the project root level. Type in the command `ng generate component <component-name>` EG. `ng generate component my-second-home` and hit enter. Also there is another shorter command. It is `ng g c <component-name>` where **g** stands for **generate** and **c** stands for **component**. Once you hit enter Angular will create four files
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ar82dc6jy2eghuv6v38r.PNG)
1. The component html file 
2. The component typescript file
3. The component CSS file
4. The component spec file (unit testing purpose - we will talk in details later)
and update the app module file.
Now lets open the typescript file and see how it looks - 
```
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-second-home',
  templateUrl: './my-second-home.component.html',
  styleUrls: ['./my-second-home.component.css']
})
export class MySecondHomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
```
As of now lets concentrate on the selector name. Copy the selector name and lets again move to the app.component.html file and paste the below code -
```
<app-my-second-home></app-my-second-home>
```
Lets navigate to the browser (which must be still running else start the server by typing npm start) and will see an output like below - 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cc6w4c3jvpabss0i00u.PNG)

**Challenge Section**
1. Create a third component with your name.
2. Go to the corresponding html file
3. Write your name
4. Use the component to display your name in browser

Hope you enjoyed reading the post. 
If yes, do like and leave a comment.
Your feedback is very precious!!!

Cheers!!!
_Happy Coding_