Angular Learning Day 1: Component
Tags: angular, beginners, component, typescript
Published: 2020-12-07 19:38:28

---
title: Angular Learning Day 1: Component
published: true
description: Angular Component 
tags: angular, beginners, component, typescript  
//cover_image: https://direct_url_to_image.jpg
---
**Objective**: In this article, you will know **Component**.

**Pre-requisite** Prior to completing this article, you should have already installed all pre-requisite tooling including: Visual Studio Code, Node Package Manager (NPM), Node, Angular CLI.

## Component 

* **Create** a component 
* **Register** it in a module
* Add an element in an **HTML markup** 

Step 1: After creating project, open the VS Code Editor Terminal and run `ng serve`

Step 2: Create a new Component **courses.component.ts**. This is the convention that be used angular building application. If the component have multiple word then separate them `course-form.component.ts` . Now creating a plain class

```
class CoursesComponent {

}
```
Once again look at naming convention. Here first letter of every word should be Capital and also by convention use the **suffix Component** in the name of class. 

So far this is a plain class. Not a component. Now convert to component we need to add some metadata that angular understand. We use a decorator. Firstly we need a decorator on the top. 

So Import - 

`import { Component } from @angular/core` 

This is the core library of the angular. Import the Component decorator. And need to apply. 

Now look at the syntax. 

```
@Component()
```
Like a function. This is called decorator function.  

```
@Component({

})
```
Pass an object. Have one or more properties tell angular how angular works. Ex: 

```
@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})
```
My selector for this component `app-courses`. This is a basic component in Angular. **My first step is done**. 

The second step is to **register this component in a Module**. 

The currently the application have only one module **app.moudle**. 

**app.module.ts** file 

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CoursesComponent } from './courses/courses.component';

@NgModule({
  declarations: [	
    AppComponent,
      CoursesComponent
   ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```
Once again we have three import file. Nothing special here. 
Under bottom have **typescript** class. `export class AppModule { }` default **AppModule**

Know this is decorator function which another decorator function called **@NgModule**. 

```
@NgModule({
  declarations: [	
    AppComponent,
    CoursesComponent
   ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
```
And know this class is decorated another decorator function **@NgModule**. Plan typescript class **AppModule** convert as a Module **Angular Point of View**. 

Don't worry about all this properties here like **declarations** **imports** **providers** **bootstrap**. 

Focus on **declarations**. Here add all **Component** part of this module. 

By default when we generate a application we have one component called **AppComponent**.  

Now we can add **CoursesComponent** and import top on that file. 

`import { CoursesComponent } from './courses/courses.component';`

> Don't have .ts . No need. 

**Here second step is done**.

Now the third step. 

```
@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})
```
This is the selector for this component which means anywhere  we have an element like **app-courses** angular have render the template **courses.component.html** inside this **element(app-courses)**. This is the external template for appComponent. Let's have a look. 

**app.component.html** file

```
<h2>Angular Demo</h2>
<app-courses></app-courses>
```
So when angular see the element it's going to render the template of our courses component.   

**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7znp29th38nrbya6thbg.PNG)

So this is how angular application works. 

**Note**: Short command for creating angular component in Terminal
`ng g c courses`

**Reference**
[Create New Project](https://angular.io/guide/setup-local)