---
# System prepended metadata

title: 8. Building Nested Components
tags: [Angular Getting Started]

---

---
title: 8. Building Nested Components
tags: Angular Getting Started
image:
---

# 8. Building Nested Components

* Passing data to a nested component using @Input
* Raising an event from a nested component using @Output


## @Input

product-list.component.ts
```
@Component({
selector: 'pm-products',
templateURL: './product-list.component.html'
})
export class ProductListComponent{}
```
property -> rating



\
product-list.component.html
```
<td>
<pm-star [rating]='product.starRating'></pm-star>
</td>
```
star.component.ts
```
@Component({
selector: 'pm-star',
templateURL: './star.component.html'
})
export class StarComponent{
@Input() rating: number;
cropWidth: number;
}
```

## @Output
Emit an event
* property must be an event
* event-binding

child.component.ts 定義 emit object 名稱 & 型態
```
@Output() clickExportCSV = new EventEmitter<Array<string>>();
```

實際使用 emit object 回傳資料
```
this.clickExportCSV.emit([
    "QWE",
    "ASD",
    "ZXC",
]);
```

parent.component.html 使用 child tag
```
<child (clickExportCSV)="exportCSV($event)"></child>
```
$event 為 emit object 回傳到 parent 之變數名稱