{"id":13729456,"url":"https://github.com/ihym/ngx-timeago","last_synced_at":"2026-01-04T18:22:19.041Z","repository":{"id":42569250,"uuid":"99378771","full_name":"ihym/ngx-timeago","owner":"ihym","description":"⏰ Live updating timestamps in Angular 6+","archived":false,"fork":false,"pushed_at":"2024-10-11T03:44:15.000Z","size":1265,"stargazers_count":78,"open_issues_count":14,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-13T11:47:07.577Z","etag":null,"topics":["angular","directive","i18n","ngx-timeago","pipe","timeago","timestamp"],"latest_commit_sha":null,"homepage":"https://ihym.github.io/ngx-timeago/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ihym.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-08-04T20:51:25.000Z","updated_at":"2024-06-30T06:58:17.000Z","dependencies_parsed_at":"2024-01-11T00:03:29.922Z","dependency_job_id":"5935af7c-6e0f-45a9-b2f4-f69744afd32d","html_url":"https://github.com/ihym/ngx-timeago","commit_stats":{"total_commits":101,"total_committers":3,"mean_commits":"33.666666666666664","dds":0.06930693069306926,"last_synced_commit":"229d3658a578d9a123f462ce49265d91efbb07a7"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihym%2Fngx-timeago","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihym%2Fngx-timeago/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihym%2Fngx-timeago/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihym%2Fngx-timeago/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ihym","download_url":"https://codeload.github.com/ihym/ngx-timeago/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224593862,"owners_count":17337185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","directive","i18n","ngx-timeago","pipe","timeago","timestamp"],"created_at":"2024-08-03T02:01:00.531Z","updated_at":"2026-01-04T18:22:18.997Z","avatar_url":"https://github.com/ihym.png","language":"TypeScript","funding_links":[],"categories":["UI Components","Third Party Components"],"sub_categories":["Time","Dates"],"readme":"# ngx-timeago [![npm version](https://badge.fury.io/js/ngx-timeago.svg)](https://badge.fury.io/js/ngx-timeago) [![npm](https://img.shields.io/npm/dm/ngx-timeago.svg?maxAge=2592000)](https://www.npmjs.com/package/ngx-timeago) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)\n\nLive updating timestamps in Angular 6+.\n\n[https://ihym.github.io/ngx-timeago/](https://ihym.github.io/ngx-timeago/)\n\nGet the complete changelog here: https://github.com/ihym/ngx-timeago/releases\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Contribute](#contribute)\n\n## Installation\n\nFirst you need to install the npm module:\n\n```sh\nnpm install ngx-timeago --save\n```\n\nChoose the version corresponding to your Angular version:\n\n| Angular           | ngx-timeago |\n| ----------------- | ----------- |\n| 16                | 3.x+        |\n| 10,11,12,13,14,15 | 2.x+        |\n| 6,7,8,9           | 1.x+        |\n\n## Usage\n\n#### 1. Import the `TimeagoModule`:\n\nOnce installed you need to import the main module into your application module by calling TimeagoModule.forRoot().\n\nMake sure you only call this method in the root module of your application, most of the time called `AppModule`.\nThis 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:\n\n```ts\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { TimeagoModule } from \"ngx-timeago\";\n\n@NgModule({\n  imports: [BrowserModule, TimeagoModule.forRoot()],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n##### SharedModule\n\nIf you use a [`SharedModule`](https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-modules) that you import in multiple other feature modules,\nyou can export the `TimeagoModule` to make sure you don't have to import it in every module.\n\n```ts\n@NgModule({\n  exports: [CommonModule, TimeagoModule],\n})\nexport class SharedModule {}\n```\n\n##### Lazy loaded modules\n\nWhen you lazy load a module, you should use the `forChild` static method to import the `TimeagoModule`.\n\nSince 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.\n\n```ts\n@NgModule({\n  imports: [\n    TimeagoModule.forChild({\n      formatter: { provide: TimeagoFormatter, useClass: CustomFormatter },\n      clock: { provide: TimeagoClock, useClass: CustomClock },\n      intl: { provide: TimeagoIntl, useClass: CustomIntl },\n    }),\n  ],\n})\nexport class LazyLoadedModule {}\n```\n\n##### I18n\n\nBy default, there is no intl service available, as the default formatter doesn't provide language support.\nYou 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.\n\n```ts\nimport { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { Timeago, TimeagoIntl, TimeagoFormatter, TimeagoCustomFormatter } from \"ngx-timeago\";\nimport { AppComponent } from \"./app\";\n\nexport class MyIntl extends TimeagoIntl {\n  // do extra stuff here...\n}\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    TimeagoModule.forRoot({\n      intl: { provide: TimeagoIntl, useClass: MyIntl },\n      formatter: { provide: TimeagoFormatter, useClass: TimeagoCustomFormatter },\n    }),\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nThere is support for a large number of languages out of the box. This support is based on the string objects taken from `jquery-timeago`.\n\nTo use any of the languages provided, you will have to import the language strings and feed them to the intl service.\n\n```ts\nimport { Component } from \"@angular/core\";\nimport { TimeagoIntl } from \"ngx-timeago\";\nimport { strings as englishStrings } from \"ngx-timeago/language-strings/en\";\n\n@Component({\n  selector: \"app\",\n  template: ` \u003cdiv timeago [date]=\"1553683912689\"\u003e\u003c/div\u003e `,\n})\nexport class AppComponent {\n  constructor(intl: TimeagoIntl) {\n    intl.strings = englishStrings;\n    intl.changes.next();\n  }\n}\n```\n\nYou can also customize the language strings or provide your own.\n\n#### 2. Use the pipe or the directive:\n\nThis is how you do it with the **pipe**:\n\n```html\n\u003cdiv\u003e{{1553683912689 | timeago:live}}\u003c/div\u003e\n```\n\nAnd in your component define live (`true` by default).\n\nThis is how you use the **directive**:\n\n```html\n\u003cdiv timeago [date]=\"1553683912689\" [live]=\"live\"\u003e\u003c/div\u003e\n```\n\n## API\n\n#### Write your own formatter\n\nIf 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`.\n\n[Example](lib/src/timeago.formatter.ts)\n\nOnce you've defined your formatter, you can provide it in your configuration.\n\n```ts\n@NgModule({\n  imports: [\n    BrowserModule,\n    TimeagoModule.forRoot({\n      formatter: { provide: TimeagoFormatter, useClass: CustomFormatter },\n    }),\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n#### Write your own clock\n\nThe only required method to build your own clock, is `tick` that must return an `Observable\u003cany\u003e`. Whenever this observable emits, the timestamp will be updated, using your formatter (and intl, if available).\n\n```ts\nimport { TimeagoClock } from \"ngx-timeago\";\nimport { Observable, interval } from \"rxjs\";\n\n// ticks every 2s\nexport class MyClock extends TimeagoClock {\n  tick(then: number): Observable\u003cnumber\u003e {\n    return interval(2000);\n  }\n}\n```\n\nSetup the clock in your module import by adding it to the `forRoot` (or `forChild`) configuration.\n\n```ts\n@NgModule({\n  imports: [\n    BrowserModule,\n    TimeagoModule.forRoot({\n      clock: { provide: TimeagoClock, useClass: MyClock },\n    }),\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n## Contribute\n\n`ngx-timeago` is packaged with [ng-packagr](https://github.com/dherges/ng-packagr) and then imported into an Angular CLI app.\nTo run the demo, do the following steps:\n\n```bash\n$ npm install\n$ npm run build:lib\n$ npm start\n```\n\n---\n\nMIT © [Vasilis Diakomanolis](https://github.com/ihym)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fihym%2Fngx-timeago","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fihym%2Fngx-timeago","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fihym%2Fngx-timeago/lists"}