---
# System prepended metadata

title: 7. More on Components
tags: [Angular Getting Started]

---

---
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[] = [...];

![](https://i.imgur.com/RINQQOx.png)

![](https://i.imgur.com/FNefeXd.png)

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

![](https://i.imgur.com/vsnwSp1.png)

Angular provides lifecycle hook

Lifecycle hook is an interface


![](https://i.imgur.com/1Rl8zMI.png)

![](https://i.imgur.com/HorWqXq.png)




### Building a Custom Pipe

Create a custom pipe

![](https://i.imgur.com/22al8tp.png)



