---
title: 7. More on Components
tags: Angular Getting Started
image:
---

# 7. More on Components

* Define an Interface
* Encapsulating Component Styles
* Using Lifecycle Hooks
* Building a Custom Pipe

### Interface
products: any[] = [...];



USE Interface 可以自己創造數據類型

for example

export Interface IProduct{
  productId: number;
  productName: string;
  productCode: string;
}

**As a type**

products: IProduct[] = [];

### Encapsulating Component Styles

style and styleUrl

### Using Lifecycle Hooks


Angular provides lifecycle hook

Lifecycle hook is an interface



### Building a Custom Pipe

Create a custom pipe