金額を桁区切りしたい（けど、小数点以下はいらない）ときに迷ったので書きました。2パターン提示します。
バージョン情報
Angular: 5.2.8
Node: 8.9.3
結論: number pipeでいい
金額だからcurrency pipeだよなーといろいろと調べていたんですが、通貨記号いらないのなら、number pipeが手っ取り早いです。
サンプルコードA
仮想通貨取引所のビットフライヤーとコインチェックのビットコイン価格を表示するテンプレートです。それぞれの価格は、Observable型で取得されるので、asyncパイプを適用した後、numberパイプを使用して、桁区切り文字を挿入しています。また、オプションの'0.0-0'で小数点を丸めています。
src/app/app.component.html:
<div>bitflyerのBTC価格:</div> <div>{{ (bitflyerTicker$ | async)?.ltp | number: '0.0-0'}}円</div> <div>coincheckのBTC価格:</div> <div>{{ (coincheckTicker$ | async)?.last | number: '0.0-0' }}円</div>
動作確認: サンプルコードA
桁区切り文字が挿入されていることがわかります。
通貨記号も表示したい - currency pipe を使う
通貨記号も表示したい場合は、currency pipeを使います
サンプルコードB
オプションの'0.0-0'で小数点を丸めています。
src/app/app.component.html:
<div>bitflyerのBTC価格:</div> <div>{{ (bitflyerTicker$ | async)?.ltp | currency: 'JPY': true: '0.0-0' }}</div> <div>coincheckのBTC価格:</div> <div>{{ (coincheckTicker$ | async)?.last | currency: 'JPY': true: '0.0-0' }}</div>
動作確認: サンプルコードB
桁区切り文字が挿入されていて、かつ通貨記号も表示されていることがわかります。
