Ngtor-time-ago NPM

Angular TimeAgo Pipe Library | Ngtor-Time-Ago

Overview

The Angular TimeAgo Pipe Library is a custom Angular library that provides a reusable TimeAgoPipe for displaying time differences in a user-friendly format. This library is designed to work with both English (en-US) and Persian (fa-IR) languages.

1. Installation

To use the Angular TimeAgo Pipe Library in your Angular project, you need to follow these steps:

1.1 Install the Library

You can install the library via npm:

npm install ngtor-time-ago-library --save

1.2 Import the Module

In your Angular application, import the TimeAgoModule from the library:

import { NgtorTimeAgoModule } from 'ngtor-time-ago';

@NgModule({
  imports: [NgtorTimeAgoModule],
  // ...
})
export class YourAppModule { }

2. Usage

The Angular TimeAgo Pipe Library provides a TimeAgoPipe that can be used in your Angular templates to display time differences.

2.1 Basic Usage

In your component's template, you can use the timeAgo pipe as follows:

<p>Posted {{ someDate | timeAgo }}</p>

Save to grepper

This will automatically calculate and display the time difference between someDate and the current date in a human-readable format, such as "just now," "5 minutes ago," etc.

2.2 Language Customization

By default, the TimeAgoPipe works with both English (en-US) and Persian (fa-IR) languages. You can specify the desired language by passing a McLanguesType value as the second parameter: <p>Posted {{ someDate | timeAgo: 'fa-IR' }}</p> This will display the time difference in Persian.

3. Code Structure

The Ngtor TimeAgo Pipe Library consists of the following key components:

TimeAgoPipe: This pipe calculates the time difference and formats it according to the selected language.
McLangues: An enum that defines language constants ('fa-IR' and 'en-US') for language selection.
localizedTextClass: A class responsible for storing localized text for various time intervals. It provides text translations for different languages.
DateTimeUtil: A utility class containing a static method for adding minutes to a Date object.

4. Customization

4.1 Adding More Languages

If you want to add support for additional languages, you can extend the localizedTextClass and update the translations in the constructor.

4.2 Customizing Time Intervals

You can customize the time intervals used for displaying time differences in the timeAgo method of the TimeAgoPipe class.

5. Examples

Let's consider a scenario where you have a webpage with multiple timestamps displayed using the TimeAgoPipe. These timestamps are updated every minute to reflect the changing time difference from the current time. https://stackblitz.com/edit/stackblitz-starters-rqdedi?file=src%2Fmain.ts

Testing

enter image description here You can see the test results in the Karma test runner's graphical interface.

Enjoying My Work?

If you've found value in my content, consider supporting my creative efforts. Every contribution helps me continue producing quality content and innovative projects for you.

Your support fuels my passion for sharing knowledge, building helpful tools, and fostering a vibrant community of learners and creators.