Angular の標準のパイプ機能の使い方

Angular の標準のパイプ機能の使い方
1. 関連

Angular の標準のパイプ機能の使い方

Angular にはパイプというビュー上の変数を加工（整形）する機能です。

例えば姓名が格納されている変数の末尾に「様」をつける、などがパイプを使って加工する機能例になります。

記述例は以下の通りです。

以下、標準で用意されている主なパイプです。

実際に記述し、実行してみます。

dell.component.ts

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

@Component({
  selector: 'app-dell',
  template:
  `
  <p>{{a | uppercase}}</p>
  <p>{{b | lowercase}}</p>
  <p>{{c | titlecase}}</p>
  <p>{{d | slice : 3:5}}</p> <!-- 3+1文字目から文字目まで -->
  <p>{{e | number}}</p>
  <p>{{f | currency}}</p>
  <p>{{f | currency: 'JPY'}}</p> <!-- デフォルトはtrue -->
  <p>{{f | currency: 'JPYY': false}}</p> <!-- falseにするとJPYYがそのまま表示 -->
  <p>{{g | percent}}</p>
  <p>{{h | date}}</p>
  <p>{{h | date | 'yyyyMMdd'}}</p>
  `,
  styleUrls: ['./dell.component.css']
  })
export class DellComponent implements OnInit {

  constructor() { }
  public readonly a = 'aiueo';
  public readonly b = 'AIUeo';
  public readonly c = 'aiueo';
  public readonly d = 'aiueo';
  public readonly e = 1234567890;
  public readonly f = 1234567890;
  public readonly g = 0.99;
  public readonly h = new Date();
  ngOnInit() {
  }
}

以下のように表示されます。