Is there a specific pipe in Angular that displays dates in a relative time ago

Question

Is there a specific pipe in Angular that displays dates in a relative time ago

My current project involves creating a website for sharing posts. One of the features I want to include is a date ago pipe in Angular.

    import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({
  name: 'messageTime',
  pure: false
})
export class MessageTimePipe implements PipeTransform {
  transform(value: Date, []): string {
    var result: string;

    // current time
    let now = new Date().getTime();

    // calculate time difference in seconds
    let delta = (now - value.getTime()) / 1000;

    // format the output based on the time difference
    if (delta < 10) {
      result = 'just now';
    } else if (delta < 60) { 
      result = Math.floor(delta) + ' seconds ago';
    } else if (delta < 3600) { 
      result = Math.floor(delta / 60) + ' minutes ago';
    } else if (delta < 86400) { 
      result = Math.floor(delta / 3600) + ' hours ago';
    } else { 
      result = Math.floor(delta / 86400) + ' days ago';
    }

    return result;
  }enter code here
}

The above code snippet is what I have been working with in my project. However, it seems to be causing some issues and not functioning correctly.

angular typescript pipe angular-pipe

Answer 1

Answer №1

To begin, let's start by creating a class for our pipe.

ng g p pipes/DateAgo

Next, we can insert the following code:

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

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

    transform(value: any, args?: any): any {
        if (value) {
            const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
            if (seconds < 29) // Show as 'Just now' if less than 30 seconds ago
                return 'Just now';
            const intervals: { [key: string]: number } = {
                '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 value;
    }

}

Answer 2

To begin, let's start by creating a class for our pipe.

ng g p pipes/DateAgo

Next, we can insert the following code:

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

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

    transform(value: any, args?: any): any {
        if (value) {
            const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
            if (seconds < 29) // Show as 'Just now' if less than 30 seconds ago
                return 'Just now';
            const intervals: { [key: string]: number } = {
                '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 value;
    }

}

Answer 3

Answer №2

In my opinion, it is more beneficial to utilize one of the available packages for implementing a "time ago" functionality rather than developing your own solution. This is due to various reasons such as quick implementation, ease of maintenance, addition of new features and fixes, among others.

ngx-timeago (my preferred choice)

This package offers unique features that set it apart from others, including internationalization support and live updates to the time ago text.
time-ago-pipe

This is a lightweight and straightforward 'pipe only' package, making it user-friendly.
ngx-moment

I recommend using this package if you are already utilizing moment.js in your application. However, be cautious as it may contribute significantly to your bundle size.
Angular Intl

This newer package seems promising with its internationalization support and the ability to customize the time ago description.

Answer 4

In my opinion, it is more beneficial to utilize one of the available packages for implementing a "time ago" functionality rather than developing your own solution. This is due to various reasons such as quick implementation, ease of maintenance, addition of new features and fixes, among others.

ngx-timeago (my preferred choice)

This package offers unique features that set it apart from others, including internationalization support and live updates to the time ago text.
time-ago-pipe

This is a lightweight and straightforward 'pipe only' package, making it user-friendly.
ngx-moment

I recommend using this package if you are already utilizing moment.js in your application. However, be cautious as it may contribute significantly to your bundle size.
Angular Intl

This newer package seems promising with its internationalization support and the ability to customize the time ago description.

Answer 5

Answer №3

To create a custom pipe in Angular, use the following command: "ng g p customePipe/timeAgo"

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

@Pipe({
  name: 'timeAgo'
})
export class TimeAgoPipe implements PipeTransform {
  transform(value: string): string {
    const time = new Date(value);
    const now = new Date();
    const seconds = Math.floor((now.getTime() - time.getTime()) / 1000);

    if (seconds < 60) {
      return 'just now';
    } else if (seconds < 120) {
      return 'a minute ago';
    } else if (seconds < 3600) {
      return Math.floor(seconds / 60) + ' minutes ago';
    } else if (seconds < 7200) {
      return 'an hour ago';
    } else if (seconds < 86400) {
      return Math.floor(seconds / 3600) + ' hours ago';
    } else {
      return time.toLocaleString();
    }
  }
}

Answer 6

To create a custom pipe in Angular, use the following command: "ng g p customePipe/timeAgo"

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

@Pipe({
  name: 'timeAgo'
})
export class TimeAgoPipe implements PipeTransform {
  transform(value: string): string {
    const time = new Date(value);
    const now = new Date();
    const seconds = Math.floor((now.getTime() - time.getTime()) / 1000);

    if (seconds < 60) {
      return 'just now';
    } else if (seconds < 120) {
      return 'a minute ago';
    } else if (seconds < 3600) {
      return Math.floor(seconds / 60) + ' minutes ago';
    } else if (seconds < 7200) {
      return 'an hour ago';
    } else if (seconds < 86400) {
      return Math.floor(seconds / 3600) + ' hours ago';
    } else {
      return time.toLocaleString();
    }
  }
}

Answer 7

Answer №4

It's advisable to utilize moment in order to create a pipe. After extensive research and experimentation, I discovered this method.

To create a pipe:

ng g pipe pipes/timeAgo

Simply enter the following code. Only one line needs to be edited, the rest will be generated automatically.

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

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

  transform(value: Date, ...args: unknown[]): unknown {
    return moment(value).fromNow(); // modify this line as needed
  }

}

<span class="timeago-label">{{'2023-07-10T06:00:00Z' | timeAgo}}</span>

Don't forget to install moment before proceeding:

npm i moment --save

Answer 8

It's advisable to utilize moment in order to create a pipe. After extensive research and experimentation, I discovered this method.

To create a pipe:

ng g pipe pipes/timeAgo

Simply enter the following code. Only one line needs to be edited, the rest will be generated automatically.

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

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

  transform(value: Date, ...args: unknown[]): unknown {
    return moment(value).fromNow(); // modify this line as needed
  }

}

<span class="timeago-label">{{'2023-07-10T06:00:00Z' | timeAgo}}</span>

Don't forget to install moment before proceeding:

npm i moment --save

Answer 9

Answer №5

Unfortunately, as of 2024, Moment is no longer supported and Angular Date pipes still do not have built-in support for this feature.

Here is the finalized version of my solution:

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

@Pipe({
  name: 'timeAgo',
  standalone: true,
})
export class TimeAgoPipe implements PipeTransform {
  transform(value: string | Date): string {
    if (!value) {
      return '';
    }

    // handling both Date objects and string dates
    const date = typeof value === 'string' ? new Date(value) : value;

    if (!(date instanceof Date) || isNaN(date.getTime())) {
      return '';
    }

    const now = new Date();
    const diff = now.getTime() - date.getTime();

    const minute = 60 * 1000;
    const hour = 60 * minute;
    const day = 24 * hour;

    if (diff < minute) {
      return 'just now';
    } else if (diff < hour) {
      const minutes = Math.floor(diff / minute);
      return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
    } else if (diff < day) {
      const hours = Math.floor(diff / hour);
      return `${hours} hour${hours > 1 ? 's' : ''} ago`;
    } else {
      const days = Math.floor(diff / day);
      return `${days} day${days > 1 ? 's' : ''} ago`;
    }
  }
}

Answer 10

Unfortunately, as of 2024, Moment is no longer supported and Angular Date pipes still do not have built-in support for this feature.

Here is the finalized version of my solution:

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

@Pipe({
  name: 'timeAgo',
  standalone: true,
})
export class TimeAgoPipe implements PipeTransform {
  transform(value: string | Date): string {
    if (!value) {
      return '';
    }

    // handling both Date objects and string dates
    const date = typeof value === 'string' ? new Date(value) : value;

    if (!(date instanceof Date) || isNaN(date.getTime())) {
      return '';
    }

    const now = new Date();
    const diff = now.getTime() - date.getTime();

    const minute = 60 * 1000;
    const hour = 60 * minute;
    const day = 24 * hour;

    if (diff < minute) {
      return 'just now';
    } else if (diff < hour) {
      const minutes = Math.floor(diff / minute);
      return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
    } else if (diff < day) {
      const hours = Math.floor(diff / hour);
      return `${hours} hour${hours > 1 ? 's' : ''} ago`;
    } else {
      const days = Math.floor(diff / day);
      return `${days} day${days > 1 ? 's' : ''} ago`;
    }
  }
}

Answer 11

Answer №6

If you're looking to dynamically update the time in real-time at specified intervals, I have integrated a solution on my website. You can incorporate it into any of the previous answers - just remember to set pure: false in the pipe's @Pipe decorator.

import {Directive, Input, OnDestroy} from '@angular/core';
import {interval, Subject, takeUntil} from 'rxjs';

@Directive({
  selector: '[dirUpdater]',
  standalone: true
})
export class UpdaterDirective implements OnDestroy {
  private destroy$ = new Subject<void>();
  private currentInterval: number = 60000; //ms

  @Input() set updateInterval(value: number) {
    this.currentInterval = value;
    this.resetInterval();
  }

  constructor() {
    this.resetInterval();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  private resetInterval() {
    this.destroy$.next();
    interval(this.currentInterval)
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {});
  }
}

To use it, simply:

<span appTimeAgoUpdater updateInterval="1000">{{time | timeAgo}}</span>

Answer 12

If you're looking to dynamically update the time in real-time at specified intervals, I have integrated a solution on my website. You can incorporate it into any of the previous answers - just remember to set pure: false in the pipe's @Pipe decorator.

import {Directive, Input, OnDestroy} from '@angular/core';
import {interval, Subject, takeUntil} from 'rxjs';

@Directive({
  selector: '[dirUpdater]',
  standalone: true
})
export class UpdaterDirective implements OnDestroy {
  private destroy$ = new Subject<void>();
  private currentInterval: number = 60000; //ms

  @Input() set updateInterval(value: number) {
    this.currentInterval = value;
    this.resetInterval();
  }

  constructor() {
    this.resetInterval();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  private resetInterval() {
    this.destroy$.next();
    interval(this.currentInterval)
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {});
  }
}

To use it, simply:

<span appTimeAgoUpdater updateInterval="1000">{{time | timeAgo}}</span>

Is there a specific pipe in Angular that displays dates in a relative time ago

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Issue with loading JSON dependencies in ionic version 2 webpack loader

Axios simulation: Total calls received: 0

What is the best way to transfer information from the window method to the data function in a Vue.js application?

Using keyof to access static properties within TypeScript classes

Issue with Navigating Angular Buttons

Using TypeScript will result in the return type of a combined generic type always being unknown

Typescript error: The property "Authorization" is not found in the type HeadersInit

Enhance the appearance of JSON data in Angular 2 with the Prettify

Working with base URL and relative paths in Angular 2 on GitHub Pages

Issues arising from TypeScript error regarding the absence of a property on an object

What is the best way to include the file name and size as query parameters in Node.js?

What is the process for exporting a plugin from dayjs() in JavaScript?

Tips for adjusting the dimensions of a child element to match its parent in Angular 12 with Typescript

Importing a third-party JavaScript library in Angular 2 RC5: Utilizing Showdown Library

Using TypeScript - Implementing a generic constraint to allow passing a Zod schema result as an argument to a function

Child routes in Angular tabs are failing to display in the currently active tab

I'm curious, which ref tag should I utilize for draft.js?

Encountering an issue in the tmp directory while deploying an Angular App with Gitlab CI

Eliminate the AM and PM options from the input time selection dropdown menu in HTML

Exploring the Google Drive API with Node