この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。
前記事：AngularのngIfとsubmitイベントでチャットコメントを実装する
次記事：Firebaseの環境構築
この記事で行うこと
本稿では、外部ライブラリであるMoment.jsをインストールし、AngularのPipeを使って投稿した日付を日本語表記に変更します。
（追記：2020/6）現時点（2020年6月）での最新の内容に書き換えています。
実装内容
Moment.jsをインストールする
Moment.jsは少し癖のあるJavaScriptの日付表示の扱いを簡単にしてくれるライブラリです。
まずはこのライブラリをプロジェクトにインストールします。
npm install moment --save
Commentクラスに、Moment.jsを使ってdateプロパティを追加します。
import * as moment from 'moment'; // 追加
export class Comment {
user: User;
initial: string;
content: string;
date: number; // 追加
constructor(user: User, content: string) {
this.user = user;
this.initial = user.name.slice(0, 1);
this.content = content;
this.date = +moment(); // 追加
}
}
+moment()は、現在時刻をUNIXタイムスタンプで取得するメソッドです。
ここで取得した現在時刻を、Angularに標準実装されているDatePipeを使ってビューに反映させます。
<section class="card">
<div class="card-header">
NgChat
</div>
<div class="card-body">
<ng-container *ngFor="let comment of comments">
<div class="media">
<div class="media-left" *ngIf="comment.user.uid !== currentUser.uid">
<a href="#" class="icon-rounded">{{comment.initial}}</a>
</div>
<div class="media-body">
<!--DatePipeを追加-->
<h4 class="media-heading">{{comment.user.name}} Date:{{comment.date | date:'medium'}}</h4>
<div>{{comment.content}}</div>
</div>
<div class="media-right" *ngIf="comment.user.uid === currentUser.uid">
<a href="#" class="icon-rounded">{{comment.initial}}</a>
</div>
</div>
<hr>
</ng-container>
</div>
</section>
実行結果
代表的なDatePipeのフォーマットをいくつか挙げておきます。それ以外の詳しいフォーマットは、公式を確認してください。
{{ dateObj | date }} // output is 'Jun 15, 2015'
{{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'
{{ dateObj | date:'shortTime' }} // output is '9:43 PM'
{{ dateObj | date:'mmss' }} // output is '43:11'
2018/9 追記
検証したところ、safariでのエラーは解消されたようです。
AngularのDatePipeは、現時点だとsafariでエラーを起こします。ご注意ください。
参考：http://qiita.com/shun_kashiwa/items/ece352083e04737b1123
Pipeを使って、日付を変換する
AngularのPipeを使って、オリジナルのpipeを作成します。
PipeはAngularJS1.xxでいうところの「filter」です。Pipeを使えば、ビューにデータを表示させる際、任意の値へ変換することができます。
例） 数字に単位をつける（100→100mm）、別の言語に翻訳する（japanese→日本語）
Angular CLIを使って、新しいPipeの雛形を作成します。
ng g pipe pipe/chat-date
app.module.tsも自動で更新され、declarationsにChatDatePipeが挿入されます。
pipe/chat-date.tsを開き、Moment.jsをインポートしておきます。
import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment'; // 追加
@Pipe({
name: 'chatDate'
})
export class ChatDatePipe implements PipeTransform {
transform(value: any, args?: any): any {
return null;
}
}
@Pipeデコレータで指定されているnameプロパティは、html内に渡す時に使う名前です。
transform()の第1引数に元となるデータの値、第2引数には第1引数がなかった場合のデフォルト値を入れます。※デフォルト値は任意です。
Moment.jsを使って、日付表示を日本語表記に変換します。
export class ChatDatePipe implements PipeTransform {
transform(date: number): string {
moment.locale('ja');
return moment(date).format('LLLL');
}
}
<div class="media-body">
<!--DatePipeを追加-->
<h4 class="media-heading">{{comment.user.name}} Date: {{comment.date | chatDate}}</h4>
<div>{{comment.content}}</div>
</div>
実行結果
ここまでで一度クライアントサイドの実装を止め、次からはFirebaseの設定に入ります。
ソースコード
この時点でのソースコード