---
title: 4. Introduction to Components
tags: Angular Getting Started
image:
---

# 4. Introduction to Components
:::success

1. Create a new file <component-name>.component.ts

2. add import statement:
import {Component} from '@angular/core' ;

3. add a @Component decorator :
@Component({

})

4. Choose a CSS selector **for the component**
@Component({
**selector**: 'app-component-overview' ,
})

5. HTML template that the component uses to **display information**
@Component({
selector: 'app-component-overview' ,
**templateUrl**: './component-overview.component.html',
})

==p.s can use template or templateUrl==

Use template

    template: "<h1>Title</h1>"
    or
    template: `<div> My First Component </div>`

6. Select the styles **for the component's template**
@Component({
selector: 'app-component-overview' ,
templateUrl: './component-overview.component.html',
**styleUrls**: './component-overview.component.css'
})

==p.s can use styles or styleUrls, and the way to write **styles: [`h3{color: green}`]**,but styles(not recommend)==

7. Add a class statement that includes the code for the component
export class ComponentOverviewComponent {
}

:::