【AngularJS】便利なパイプの使い方まとめ

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

【はじめに】パイプとは

パイプとは、データを整形するための機能です。

主なパイプ 概要
number 数値の桁をカンマ区切り
DatePipe 日付変換(yyyy/mm/dd形式など)
DecimalPipe 小数点切り捨て、零埋めうめ
JsonPipe オブジェクト → JSON
PercentPipe パーセント表記
SlicePipe スライス(文字列の部分抽出)
CurrencyPipe 通貨書式変換
UpperCasePipe, LowerCasePipe 大文字小文字変換

【パイプ】大文字・小文字の相互変換

lowercase、uppercaseパイプを使えば、大文字・小文字の相互変換ができます。

■app/app.component.ts

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

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

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

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

export class AppComponent {
  sarvant = 'Artoria';
}

■app/app.component.html

<!-- 小文字に変換 -->
<p>{{ sarvant | lowercase }}</p>

<!-- 大文字に変換 -->
<p>{{ sarvant | uppercase }}</p>
詳細記事
1 【AngularJS】大文字・小文字の相互変換

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

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]
パラメータ 説明
value 任意の数値
info 桁数情報(minInt.minFrac-maxFrac形式の文字列で指定)
minInt:最小桁数(整数部)、minFrac:最小桁数(小数部)、maxFrac:最大桁数(小数部)
詳細記事
1 【AngularJS】数値に「桁区切り文字」を追加

【パイプ】オブジェクト→JSONなど

jsonパイプを使えば、JavaScriptのオブジェクトをJSON形式に変換できます。

オブジェクト→JSON

■app/app.component.ts

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

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

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

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

export class AppComponent {
  // オブジェクトを作成
  sarvant: any = {
    name: 'アルトリア',
    class: 'savar',
    status: [14560, 15439],
  };
}

■app/app.component.html

<pre>{{ sarvant | json }}</pre>
詳細記事
1 【AngularJS】オブジェクトをJSONに変換
参考文献・関連記事
参考 【AngularJS入門】基礎とサンプル集
関連 【Ionic入門】Android・iPhoneアプリ開発編
関連記事