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.
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);
}
}
}
