---
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 之變數名稱