How to use moment with Ionic & Firebase

How subtly cool is it when an app keeps a record of when something was submitted or edited, it's even more when this updates in real time!

In this example we are going to create a simple commenting app called 'yadayadayada' – basically it will just be the comments section on a blog post. Firstly let's setup a basic ionic app using the cli:

ionic start yadayadayada

First we will need the moment.js module, thankfully there is already an Angular implementation which we will install:

npm install angular2-moment --save

Update your app module to include this module (import and add to imports):

import { MomentModule } from 'angular2-moment'

imports: [ MomentModule ]

For moment to work it needs a timestamp reference, fortunately Firebase makes this really simple. In this example when saving a comment I store the time it was saved as a timestamp by doing the following:

// create a new timestamp
created: firebase.database.ServerValue.TIMESTAMP

You then push this record to your database however you normally would – for example push() or set()

Now all you need to do is take advantage of angular's moment pipes in your html template – like this:

{{comment?.created | amTimeAgo}}

I will post an example app on github soon.