npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-timeago

v3.0.0

Published

Live updating timestamps in Angular 6+.

Downloads

58,204

Readme

ngx-timeago npm version npm License: MIT

Live updating timestamps in Angular 6+.

https://ihym.github.io/ngx-timeago/

Get the complete changelog here: https://github.com/ihym/ngx-timeago/releases

Installation

First you need to install the npm module:

npm install ngx-timeago --save

Choose the version corresponding to your Angular version:

| Angular | ngx-timeago | | ----------------- | ----------- | | 16 | 3.x+ | | 10,11,12,13,14,15 | 2.x+ | | 6,7,8,9 | 1.x+ |

Usage

1. Import the TimeagoModule:

Once installed you need to import the main module into your application module by calling TimeagoModule.forRoot().

Make sure you only call this method in the root module of your application, most of the time called AppModule. This method allows you to configure the TimeagoModule by specifying a formatter, clock and/or an intl service. You should end up with code similar to this:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { TimeagoModule } from "ngx-timeago";

@NgModule({
  imports: [BrowserModule, TimeagoModule.forRoot()],
  bootstrap: [AppComponent],
})
export class AppModule {}
SharedModule

If you use a SharedModule that you import in multiple other feature modules, you can export the TimeagoModule to make sure you don't have to import it in every module.

@NgModule({
  exports: [CommonModule, TimeagoModule],
})
export class SharedModule {}
Lazy loaded modules

When you lazy load a module, you should use the forChild static method to import the TimeagoModule.

Since lazy loaded modules use a different injector from the rest of your application, you can configure them separately with a different formatter/clock/intl service.

@NgModule({
  imports: [
    TimeagoModule.forChild({
      formatter: { provide: TimeagoFormatter, useClass: CustomFormatter },
      clock: { provide: TimeagoClock, useClass: CustomClock },
      intl: { provide: TimeagoIntl, useClass: CustomIntl },
    }),
  ],
})
export class LazyLoadedModule {}
I18n

By default, there is no intl service available, as the default formatter doesn't provide language support. You should provide one, if you end up with a formatter that needs it (either TimeagoCustomFormatter which is provided by the lib or your own). The purpose of the intl service is to contain all the necessary i18n strings used by your formatter.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { Timeago, TimeagoIntl, TimeagoFormatter, TimeagoCustomFormatter } from "ngx-timeago";
import { AppComponent } from "./app";

export class MyIntl extends TimeagoIntl {
  // do extra stuff here...
}

@NgModule({
  imports: [
    BrowserModule,
    TimeagoModule.forRoot({
      intl: { provide: TimeagoIntl, useClass: MyIntl },
      formatter: { provide: TimeagoFormatter, useClass: TimeagoCustomFormatter },
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

There is support for a large number of languages out of the box. This support is based on the string objects taken from jquery-timeago.

To use any of the languages provided, you will have to import the language strings and feed them to the intl service.

import { Component } from "@angular/core";
import { TimeagoIntl } from "ngx-timeago";
import { strings as englishStrings } from "ngx-timeago/language-strings/en";

@Component({
  selector: "app",
  template: ` <div timeago [date]="1553683912689"></div> `,
})
export class AppComponent {
  constructor(intl: TimeagoIntl) {
    intl.strings = englishStrings;
    intl.changes.next();
  }
}

You can also customize the language strings or provide your own.

2. Use the pipe or the directive:

This is how you do it with the pipe:

<div>{{1553683912689 | timeago:live}}</div>

And in your component define live (true by default).

This is how you use the directive:

<div timeago [date]="1553683912689" [live]="live"></div>

API

Write your own formatter

If you want to write your own formatter, you need to create a class that implements TimeagoFormatter. The only required method is format that must return the final string.

Example

Once you've defined your formatter, you can provide it in your configuration.

@NgModule({
  imports: [
    BrowserModule,
    TimeagoModule.forRoot({
      formatter: { provide: TimeagoFormatter, useClass: CustomFormatter },
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Write your own clock

The only required method to build your own clock, is tick that must return an Observable<any>. Whenever this observable emits, the timestamp will be updated, using your formatter (and intl, if available).

import { TimeagoClock } from "ngx-timeago";
import { Observable, interval } from "rxjs";

// ticks every 2s
export class MyClock extends TimeagoClock {
  tick(then: number): Observable<number> {
    return interval(2000);
  }
}

Setup the clock in your module import by adding it to the forRoot (or forChild) configuration.

@NgModule({
  imports: [
    BrowserModule,
    TimeagoModule.forRoot({
      clock: { provide: TimeagoClock, useClass: MyClock },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Contribute

ngx-timeago is packaged with ng-packagr and then imported into an Angular CLI app. To run the demo, do the following steps:

$ npm install
$ npm run build:lib
$ npm start

MIT © Vasilis Diakomanolis