angular
Angular4

Angularのパイプをモデル内で使う

More than 1 year has passed since last update.

Angularでは日時のフォーマット操作を行う方法としてpepeが提供されています。
このパイプは、 Viewにバインドされたオブジェクトや変数に対して、| で、パイプして使います。
今回は、DatePipeに用意されているtransformというメソッドを使って、 |でパイプせずに、モデル(serviceやcomponent)内で使う方法を紹介します。

通常の使い方

その前に通常の使い方をおさらい

datepipe-test.component.html(view側)
<p>{{date}}</p>
<p>{{date | date: 'y/MM/dd (EE) HH:mm'}}</p>
datepipe-test.component.ts(model側)
import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-datepipe-test',
  templateUrl: './datepipe-test.component.html',
  styleUrls: ['./datepipe-test.component.css']
})
export class DatepipeTestComponent implements OnInit {
  private date: Date;

  constructor() { }

  ngOnInit() {
    this.date = new Date;
  }
}

次のように、dateの表示結果がフォーマットされる

スクリーンショット 2017-09-03 11.00.52.png

モデル内で使う方法

事前に、app.module.ts内でDatePipeprovidersに登録する

app.module.ts
import { DatePipe } from '@angular/common';
...
providers: [DatePipe,...] 
datepipe-test.component.html(view側)
<p>{{date}}</p>
<p>{{formattedDate}}</p>
datepipe-test.component.ts(model側)
import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-datepipe-test',
  templateUrl: './datepipe-test.component.html',
  styleUrls: ['./datepipe-test.component.css']
})
export class DatepipeTestComponent implements OnInit {
  private date: Date;
  private formattedDate: string;

  // DatePipeをインジェクトする
  constructor(private datePipe: DatePipe) { }

  ngOnInit() {
    this.date = new Date;
    this.formattedDate = this.datePipe.transform(this.date, 'y/MM/dd (EE) HH:mm');
  }
}

通常の使い方と同様に、dateの表示結果がフォーマットされる