Display Time Relatively in AngularJS

In this tutorial we will learn to display time relatively in our Angular applications.

Displaying relative time has become quite popular in past few year, with all the major social networking websites showing relative time for timelines.

For example instead of showing a static time stamp for time, we show it as “a min ago“, and this will dynamically update on regular intervals depending on the time passed.

Angular-moment

To implement this feature we will use the “angular-moment” library. This library uses the awesome “moment.js” behind the scenes and provides us with handy directives and filters which we can use to display time relatively.

Setup

DEMO  DOWNLOAD

For the illustration I’ll be developing a quick demo app that will demonstrate the capabilities of this libraries.

To use angular-moment we need to first include the “moment.js” library and then “angular-moment.js” library.


https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js


https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.1/angular-moment.min.js


Next we will define our angular module and then inject “angularMoment” as a dependency. We will also setup our controller.


(function(){
angular.module('relativeTime',['angularMoment'])


.controller('mainCtrl',[function(){
var vm = this;
vm.time = new Date();
}])
})()


In our controller we assign the vm.time variable a new date-time object.

Markup

In our view we will first declare our app and controller. We also display the plain time returned by new Date().
 

Display relative time with Timeago directive

To display time relatively angular-moment provides us with am-time-ago directive. This directive takes the reference-time as an attribute and then displays relative time with respect to the reference-time provided. Add the below to your code to display time relatively.

This kind of formatting is mostly used when displaying timelines on social networks or any other places where the content is updated frequently.

Display as calendar format with amCalendar filter

amCalendar filter formats the date and displays the relative date, with respect to the reference date provided. This depends on how close the reference-time’s date is to the current date.
eg: Last Monday at 4:30 AM, Yesterday at 4:30 AM, Today at 4:30 AM etc.
Visit here to find out more.
The basic usage is as below.

{{main.time|amCalendar}}


This kind of formatting could be used to display dates for events, occasions gatherings.

There are more formatting or display options available with angular-moment, visit the Github page.

Demo App

Plain Time : {{main.time}}

Time AGO Directive

This is current time minus 2 hours!

Time AGO Directive

Please wait a miniute and observe the below time dynamically updating.

Calender Filter

We have organized an event and its happening right now.

{{main.time|amCalendar}}


(function(){
angular.module('relativeTime',['angularMoment'])

.controller('mainCtrl',[function(){
var vm = this;
vm.time = new Date();

vm.hourAgo = new Date();
vm.hourAgo.setHours(vm.time.getHours() - 2);
}])
})()


DEMO  DOWNLOAD

Conclusion

Human brain interprets relative time faster than actual time stamp. Using this effect in our applications would make it a lot more easier to our users to relate the time of the post/event. Angular-Moment provides a cool set of directives and filters that helps us to implement this feature in our application with ease. So go ahead and try it in your Angular Projects.
 

There are a lot more other directives and filter provided by Angular-Moment that allows us to play with time. Read here.