August 10, 2020

angular 6 custom moment pipe like whatsapp dates on chat application

Angular 6 custom moment pipe just like whatsapp dates on chat application

Here i am creating a pipe ‘moment’ with a parameter ‘fromNow’ which will be used for 3 reasons.

  1. less then a day messages will be showing from now variables. like
    0 to 44 seconds s a few seconds ago
    unset ss 44 seconds ago
    45 to 89 seconds m a minute ago
    90 seconds to 44 minutes mm 2 minutes ago … 44 minutes ago
    45 to 89 minutes h an hour ago
    90 minutes to 21 hours hh 2 hours ago … 21 hours ago
  2. Less then a week it will be showing day of the week.
  3. Greater then a week it will be displaying the ‘DD MMM YYYY’  format.

You can modify the code for more other conditions.

Angular pipe ‘moment’ with a parameter ‘MM DD YYYY’ or  any other format  will be used as moment format.

So its a win for all.


import { Pipe, PipeTransform } from ‘@angular/core’;
import * as moment from ‘moment’;

name: ‘moment’
export class MomentPipe implements PipeTransform {

transform(time: any, format?: any): any {
return null;

return null;

let day = moment(time);

if(format == ‘fromNow’){
if(moment().diff(day,’days’) < 1){
return day.fromNow();
if(moment().diff(day,’days’) < 7){
return day.format(‘dddd’);
return day.format(‘DD MMM YYYY’);

return day.format(format);




You may also like...