Angular 筆記 - Pipe 管線元件：Uppercase 與 Lowercase

Pipe，是在 Angular 中的一個好用的功能，其使用是在 template 使用，加上 | 這個符號，後面放上其函式，就可以直接使用並渲染於網頁上。

管道用來對字串、貨幣金額、日期和其他顯示資料進行轉換和格式化。管道是一些簡單的函式，可以用來接受輸入值並返回一個轉換後的值。例如，你可以使用一個 Pipe 把日期顯示為 1988 年 4 月 15 日，而不是其原始字串格式。

Angular 為典型的資料轉換提供了內建的管道，包括國際化的轉換（i18n），它使用本地化資訊來格式化資料。資料格式化常用的內建管道如下：

• DatePipe：根據本地環境中的規則格式化日期值。
• UpperCasePipe：把文字全部轉換成大寫。
• LowerCasePipe ：把文字全部轉換成小寫。
• CurrencyPipe ：把數字轉換成貨幣字串，根據本地環境中的規則進行格式化。
• DecimalPipe：把數字轉換成帶小數點的字串，根據本地環境中的規則進行格式化。
• PercentPipe ：把數字轉換成百分比字串，根據本地環境中的規則進行格式化。

Uppercase 與 Lowercase

把下方 template 的英文字母，全部轉成大寫跟小寫。

HTML

<h2>{{title}}</h2>

export class AppComponent {
  title = "This is Angular Practice";
}

只要在 template 的元件型指令中的變數後方加上 | uppercase 或是 | lowercase 就會把標題全部改成大寫或是小寫囉~!!

<h2>{{title | uppercase}}</h2>
<h2>{{title | lowercase}}</h2>

Demo