Custom Pipe | filter for calculating relative time in angular2

Question

During the learning process, I came across Creation of Custom Pipe, so I thought this will help.

Congruent

You mean here?: stackoverflow.com/documentation/angular2 and this?: stackoverflow.com/documentation/angular2/1165/pipes/3756/… You posted in Questions but this isn't a question. – Robertson

clearly look at the title. Custom filter for relative time calculation. Don't just argue for the sake of doing. – Congruent

Answer 1

Below is the code for custom pipe.

import{PipeTransform,Pipe} from '@angular/core';

@Pipe({
    name:'relativeTime'
})

export class RelativeTimeFilterPipe implements PipeTransform{

    transform(inputDate:string):string{
        var current = new Date().valueOf();
        var input = new Date(parseInt(inputDate)).valueOf();
        var msPerMinute = 60 * 1000;
        var msPerHour = msPerMinute * 60;
        var msPerDay = msPerHour * 24;
        var msPerMonth = msPerDay * 30;
        var msPerYear = msPerDay * 365;

        var elapsed = current - input;

        if (elapsed < msPerMinute) {
            return Math.round(elapsed / 1000) + ' seconds ago';
        }

        else if (elapsed < msPerHour) {
            return Math.round(elapsed / msPerMinute) + ' minutes ago';
        }

        else if (elapsed < msPerDay) {
            return Math.round(elapsed / msPerHour) + ' hours ago';
        }

        else if (elapsed < msPerMonth) {
            return 'approximately ' + Math.round(elapsed / msPerDay) + ' days ago';
        }

        else if (elapsed < msPerYear) {
            return 'approximately ' + Math.round(elapsed / msPerMonth) + ' months ago';
        }

        else {
            console.log('inside the if condition', elapsed);
            return 'approximately ' + Math.round(elapsed / msPerYear) + ' years ago';
        }

    }
}

LIVE DEMO

Congruent

I don't think this answer will update relative time dynamically because this is an impure pipe but its not being treated as one. If you want this to work dynamically you would have to make it impure, but impure pipes are expensive. If you want something uber cool try my answer instead :) – Cecilececiley

Answer 2

Here's an async relative date pipe for you. It updates relative time as you watch your screen and its not even an impure pipe, making it much faster! Another great thing is that the relative time updates all occur at the same time by using a cron scheduler.

import { OnDestroy, Pipe, PipeTransform } from '@angular/core'
import { timeAgo } from '../../../utils/date-utils'
import { BehaviorSubject } from 'rxjs'
import * as schedule from 'node-schedule'

@Pipe({name: 'timeAgo'})
export class TimeAgoPipe implements PipeTransform, OnDestroy {

  sub: BehaviorSubject<string>
  job: schedule.Job
  date: Date

  constructor() {
    this.sub = new BehaviorSubject<string>(null)
    this.job = schedule.scheduleJob('*/10 * * * * *', () => { // updates every 10 secs at 1:10 1:20 1:30 etc
      if (this.date) this.sub.next(timeAgo(this.date))
    })
  }

  transform(date: Date | number): BehaviorSubject<string> {
    setTimeout(() => {
      this.date = new Date(date)
      this.sub.next(timeAgo(this.date))
    })

    return this.sub
  }

  ngOnDestroy(): void {
    this.job.cancel()
  }
}

template usage looks like this:

<span>{{ activity.date | timeAgo | async }}</span>

And here's the timeAgo function:

import TimeAgo from 'javascript-time-ago'
import en from 'javascript-time-ago/locale/en'

TimeAgo.addDefaultLocale(en)
const ago = new TimeAgo()

export const timeAgo = (date) => {
  return ago.format(date)
}

Cecilececiley

It would be better to use interval operator from RxJs instead of 'node-schedule'. – Analogical

Can suppress that warning in angular.json allowedCommonJsDependencies - i personally don't get the warning for javascript-time-ago, did u install @types/javascript-time-ago - however, I do get the warning for node-schedule which I have suppressed – Cecilececiley