Angular でpipeの使い方

Angular でpipeの使い方

Angular にはpipeという機能があります。データをフォーマットするための仕組みです。

{{式 | パイプ名}}

というように記述します。Angular には標準でいくつか標準で提供されているpipeがあります。

以下のように記述します。

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

@Component({
  selector: 'app-root',
  template:
  `
  <p>{{dt | date:'yyyy/MM/dd'}}</p> <!-- mmではなくMMとする -->
  <p>{{num | number:'5.0-0'}}</p> <!-- 整数の最小桁数=5,小数は0-0とすると非表示 -->
  <p>{{num | number:'5.0-1'}}</p> <!-- 小数の最大桁数=1,丸められる -->
  <p>{{num | number:'5.3-5'}}</p> <!-- 小数の最小桁数=3,最大桁数=5 -->
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dt = new Date();
  num = 10000000.06;
}

結果は以下のようになります。

2018/07/03

10,000,000

10,000,000.1

10,000,000.060

カスタムパイプ

独自のパイプを作成することができます。カスタムパイプを作成するには

ng generate pipe パイプ名

と実行します。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^