Angular 使用UpperCasePipe及LowerCasePipe轉插值為大小寫

在Angular template使用插值符{{...}}顯示component屬性內容時，可利用UpperCasePipe轉大寫，LowerCasePipe轉小寫。

例如helloworld = 'Hello World'是定義在component的屬性。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'demo';
  helloworld = 'Hello World'; // <--
}

在template分別使用UpperCasePipe及LowerCasePipe轉插值為大小寫。

app.component.html

<p>{{ helloworld }}</p>
<p>{{ helloworld | uppercase }}</p>
<p>{{ helloworld | lowercase }}</p>

顯示效果如下：

參考：

• Angular 使用插值符號(interpolation)來顯示Component的屬性資料
• Angular 使用DatePipe格式化日期 format Date with DatePipe
• Angular 使用routeLink切換頁面
• Angular 使用*ngFor來顯示陣列內容