Angular |DecimalPipe(18)

html部分

  <p>
    {{pi | number}}
  </p>
  <p>
    {{pi | number:'4.1-5'}}-4.1-5=整數出現四位、小數點至少一位、小數最多五位
  </p>
  <p>
    minIntegerDigits.minFractionDigits-maxFractionDigits
    <br />
    minIntegerDigits:小數點前的最小整數位數。默認為1<br />
    minFractionDigits: 小數點後的最小位數。默認為0<br />
    maxFractionDigits:小數點後的最大位數。默認值為3<br />
  </p>

ts部分

  pi: number = 3.14159265359;

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular |UpperCasePipe、|LowerCasePipe(17)

html部分

<p>{{mStr|uppercase}}-uppercase(轉大寫)</p>
<p>{{mStr|lowercase}}-lowercase(轉小寫)</p>

ts部分

 mStr = "aBcDe";

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular |DatePipe(16)

更多格式Angular DatePipe
html部分

日期物件
<p>{{mNow|date:'medium' }}</p>
<p>{{mNow|date:'yyyy-MM-dd' }}</p>
字串物件
<p>{{mNows|date:'medium' }}</p>
<p>{{mNows|date:'yyyy-MM-dd' }}</p>
格林威治時間+小時
<p>{{mNow|date:'yyyy-MM-dd HH:mm:ss' :'+0800'}}</p>

ts部分

  mNow = Date.now();
  mNows = '2022-09-11 12:00:12';

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
3.Angular DatePipe