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.
- 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 - Less then a week it will be showing day of the week.
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import { Pipe, PipeTransform } from '@angular/core'; import * as moment from 'moment'; @Pipe({ name: 'moment' }) export class MomentPipe implements PipeTransform { transform(time: any, format?: any): any { if(!time) return null; if(!format) 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'); } if(format){ return day.format(format); } } } |