---
# System prepended metadata

title: 4. Introduction to Components
tags: [Angular Getting Started]

---

---
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 {
}
    
:::