Snippet

Angular Human Readable Date Pipe

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

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