【AngularJS】数値に「桁区切り文字」を追加

AngularJSにおけるnumberパイプで数値に「桁区切り文字」を追加する方法をまとめました。

## 【パイプ】数値に「桁区切り文字」を追加

numberパイプを使えば、数値に「桁区切り文字」を追加できます。

■app/app.component.ts

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

// コンポーネントの構成情報を定義するデコレータ
@Component({
  // コンポーネントの適用先を表すセレクター式
  selector: 'app-root',

  // コンポーネントに適用するスタイルシート
  styleUrls: ['./app.component.css'],

  // コンポーネントに適用するテンプレート(外部ファイルから読み込み)
  templateUrl: './app.component.html',
})

export class AppComponent {
  point = '114514';
}

■app/app.component.html

<!-- カンマ区切り -->
<p>{{ point | number }}</p>

<!-- 桁数指定 -->
<p>{{ point | number : '8.1-2' }}</p>

■実行結果

114,514

00,114,514.0

書式

value | number [: info]