How to create a pipe that converts timestamps to relative time strings e g 2 hours ago

Question

can someone help me with this by including relevant code or example, How to create a pipe that converts timestamps to relative time strings (e.g., '2 hours ago')?

Answer 1

You can use the date-fns library for clean and accurate time difference formatting.

Relative Time Pipe using date-fns

1. Install date-fns

npm install date-fns


2. Create the Pipe

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

import { formatDistanceToNow } from 'date-fns';

@Pipe({

  name: 'relativeTime'

})

export class RelativeTimePipe implements PipeTransform {

  transform(value: string | number | Date): string {

    if (!value) return '';

    return formatDistanceToNow(new Date(value), { addSuffix: true });

  }

}

3. Usage in Template

<p>{{ post.createdAt | relativeTime }}</p>

<!-- Output: 2 hours ago -->