# Angular - Directive 與 Pipe 初認識

## Directive
directive （指令），是 DOM 元素上的一個 mark(標記)，像是屬性、元素名稱或是 style，它用來告訴 template 將指定的行為附加到該 DOM 元素上（像是事件監聽），替元素增加新的方法或是功能。

### Directive 的類型
directive 一共可以分為三種類型：
- Components（組件） — 組件是最常見的 directive， Angular 的應用程式就是由一群 component 所組成的。
- Structural directives（結構型指令） — 藉由加入及移除 DOM 元素來改變 DOM layout
- Attribute directives(屬性型指令) — 改變元素、元件的外觀或行為

其實在之前我們已經使用過了 Angular 中的指令，像是 `*ngIf` 以及 `*ngFor`，這兩個指令屬於結構型指令，所以這一章節會針對 `Attribute directives (屬性型指令)` 來做介紹。

### 屬性型指令 (Attribute directives)
屬性型指令，因其在 Template 中看起來就像是 HTML Tag 的屬性，故以此命名。
在開發的過程中，可能會經常遇到需要改變樣式的狀況，
常見的內建指令有以下三種：
- ngClass: 添加或刪除 DOM element 的 CSS Class
- ngStyle: 添加或刪除 DOM element 的 CSS 屬性
- ngModule: 於表單中添加雙向數據綁定（介紹雙向綁定時有使用過！）

#### ngClass
- 基本使用方式
第一個參數為 class 的名稱，第二個參數是 boolean 值，如果布林值為 true ，則添加該 class
以下範例是，若為 true，則添加 `isDone` 這個 class

<div [ngClass]="{'isDone':true}"></<div>

- 使用判斷增加刪除 class
使用先前實作的 todo list 來實作判斷。

<div *ngFor="let task of tasks; let i = index; let first = first">
    <div class="task__item">
      <span>{{ i + 1 }}</span>
      <input type="checkbox" (change)="handleChecked(i)" />
    <!--  使用 ngClass 來做判斷，若 i 值 = 0，則為該元素添加 isFirst 的 class  -->
      <span [ngClass]="{ isFirst: i === 0 }">{{ task.taskTitle }}</span>
      <button *ngIf="!task.isCheck; else tDone" (click)="handleRemoveTask(i)">
        remove
      </button>
      <ng-template #tDone>DONE</ng-template>
    </div>
 </div>

.isFirst {
  font-size: 20px;
  font-weight: 600;
}


#### ngStyle
- 基本使用方式

<div [ngStyle]="{'background-color':'green'}"></<div>

- 使用判斷增加或刪除 style
使用先前實作的 todo list 來實作判斷。

 <!--   使用 ngStyle 判斷任務是否完成，如果完成就加粗   -->
<div class="task__item" [ngStyle]="{ fontWeight: task.isCheck ? 600 : '' }">
     <span>{{ i + 1 }}</span>
     <input type="checkbox" (change)="handleChecked(i)" />
     <span>{{ task.taskTitle }}</span>
     <button *ngIf="!task.isCheck; else tDone" (click)="handleRemoveTask(i)">
        remove
     </button>
     <ng-template #tDone>DONE</ng-template>
</div>


## Pipes
在渲染視圖之前，先將資料進行轉換，但是原始資料並不會被影響！
Angular 中有提供了一些內建的 Pipes 供使用，像是轉換字型是大寫或小寫，數字轉為小數點或是進行日期的轉換。
那為什麼會叫做 **pipes** ? 因為他的符號是寫成 `|` 看起來就像是一個管子的樣子！

### 內建 Pipes 的類型
1. 字串轉換
- 轉換為大寫：`<h1>{{title | uppercase}}</h1>`
- 轉換為小寫：`<h1>{{title | lowercase}}</h1>`
- 首字母大寫：`<h1>{{title ｜ titlecase}}</h1>`
- 截取部分字串：`<h1>{{title | slice:從哪裡開始：到哪裡結束}}</h1>`

// 假設 title = "today is sunday"
<h1>{{title | slice:3}}<h1>
// 這裡會呈現 "ay is sunday"，從 index 3 開始

<h1>{{title | slice:3:7}}</h1>
// 這裡會呈現 "ay i"，代表從 index 3 開始，在 index 7 之前結束

- 呈現 json 格式：`<h1>{{object | json}}</h1>`
2. 數字轉換
- 數字小數點：`{{count | number:"在小數點前的最小位數.小數點後的最小位數-小數點後的最大位數"}}`

// 假設 count = 345.2345
<p>{{count | number:"1.2-3"}}</p>
// 這裡會呈現 345.235
<p>{{count | number:"1.6-7"}}</p>
// 這裡會呈現 345.234500

- 數字百分比：`{{count | percent}}`
3. 貨幣轉換：`{{count | currency : "貨幣代號"}}`
4. 日期轉換
- 'M/d/yy, h:mm a' : `{{myDate | date:"short"}}`
- 'M/d/yy' : `{{myDate | date:"shortDate"}}`
更多日期格式可以參考 [Angular 官方](https://angular.io/api/common/DatePipe)

## 參考資料
- [[Angular 深入淺出三十天] Day 06 - 基礎結構說明（三）](https://ithelp.ithome.com.tw/articles/10204799)
- [Angular - attribute-directives](https://angular.io/guide/attribute-directives)
- [Angular Tutorial - 16 - Pipes](https://www.youtube.com/watch?v=y8lwG8IM82k&list=PLC3y8-rFHvwhBRAgFinJR8KHIrCdTkZcZ&index=16)

###### tags: `Angular`