【Angular】numberパイプ(DecimalPipe)とは？使い方などを解説！

この記事ではAngularの『numberパイプ(DecimalPipe)』について、

• Angularのnumberパイプ(DecimalPipe)とは
• Angularのnumberパイプ(DecimalPipe)を用いたサンプルコード

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Angularのnumberパイプ(DecimalPipe)とは

Angularのnumberパイプ(DecimalPipe)を使用すると、指定された数値を桁区切り文字(例えば、カンマなど)で区切ったものを出力することができます。また、引数を指定することで、整数部と小数部の表示桁数も指定することができます。

numberパイプ(DecimalPipe)の構文を以下に示します。

value | number [: digitsInfo]

Angularのnumberパイプ(DecimalPipe)を用いたサンプルコード

Angularのnumberパイプ(DecimalPipe)を用いたサンプルコードを以下に示します。

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

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li>元の値:{{ value }}</li>
      <li>デフォルトの場合:{{ value | number }}</li>
      <li>桁数フォーマット『5.1-2』を使用した場合:{{ value | number : '5.1-2' }}</li>
      <li>桁数フォーマット『1.0-0』を使用した場合:{{ value | number : '1.0-0' }}</li>
    </ul>
  `,
})
export class AppComponent {
  value = 1234.5678;
}

// 出力結果
// 元の値:1234.5678
// デフォルトの場合:1,234.568
// 桁数フォーマット『5.1-2』を使用した場合:01,234.57
// 桁数フォーマット『1.0-0』を使用した場合:1,235

digitsInfoを省略した場合、numberパイプは小数点以下3桁で値を丸めます。上記のサンプルコードの場合、小数点以下の5678を3桁で丸めているので568になっています。

digitsInfoのminIntegerDigitsにvalueよりも大きい桁数を指定した場合、numberパイプは不足した桁を0で補完します。上記のサンプルコードの場合、valueの整数部は1234の4桁ですが、minIntegerDigitsに5を指定しているので、01234となっています(正確にはカンマが付いた01,234になっています)。また、上記のサンプルコードではdigitsInfoを5.1-2と指定しているので、小数部は1～2桁になるように整形されています。

整数に丸めたい場合には、minFractionDigitsとmaxFractionDigitsの両方に0を指定します。

本記事のまとめ

この記事ではAngularの『numberパイプ(DecimalPipe)』について、以下の内容を説明しました。

• Angularのnumberパイプ(DecimalPipe)とは
• Angularのnumberパイプ(DecimalPipe)を用いたサンプルコード

お読み頂きありがとうございました。