Snippet

Angular Human Readable Date Pipe

AOAnonymous One· Aug 22, 20221 min read
  • #Angular
  • #Date
  • #Pipe

Angular Human Readable Date Pipe

Angular pipe to display the date in a human readable format.

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

@Pipe({ name: 'dateAgo' })
export class DateAgoPipe implements PipeTransform {

  transform(date: Date | number): any {
    if (date) {
      const seconds = Math.floor((+new Date() - +new Date(date)) / 1000);
      if (seconds < 29) return 'Just now'; // less than 30 seconds ago
      const intervals: any = {
        'year': 31536000,
        'month': 2592000,
        'week': 604800,
        'day': 86400,
        'hour': 3600,
        'minute': 60,
        'second': 1
      };
      let counter;
      for (const i in intervals) {
        counter = Math.floor(seconds / intervals[i]);
        if (counter > 0) {
          if (counter === 1) return counter + ' ' + i + ' ago'; // singular (1 day ago)
          else return counter + ' ' + i + 's ago'; // plural (2 days ago)
        }
      }
    }
    return date;
  }

}

Don't forget to add your pipe to the declarations array of your module.

0 Comments

Sign in to join the conversation.

Search

Jump to a page, story or project