From 830d89cbf15f57304909328fbfc3c01cadf1d5cd Mon Sep 17 00:00:00 2001 From: ihym Date: Tue, 20 Jun 2023 16:46:01 +0300 Subject: [PATCH] chore: update readme --- README.md | 116 ++++++++++++++++++++++++--------------------------- angular.json | 3 ++ 2 files changed, 58 insertions(+), 61 deletions(-) diff --git a/README.md b/README.md index 69f9a9b..9752cdc 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# ngx-timeago [![Build Status](https://travis-ci.org/ihym/ngx-timeago.svg?branch=master)](https://travis-ci.org/ihym/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) +# 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) Live updating timestamps in Angular 6+. @@ -6,11 +6,10 @@ Live updating timestamps in Angular 6+. Get the complete changelog here: https://github.com/ihym/ngx-timeago/releases -* [Installation](#installation) -* [Usage](#usage) -* [API](#api) -* [Contribute](#contribute) - +- [Installation](#installation) +- [Usage](#usage) +- [API](#api) +- [Contribute](#contribute) ## Installation @@ -22,34 +21,31 @@ 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+ | +| 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(). +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: ```ts -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { TimeagoModule } from 'ngx-timeago'; +import { BrowserModule } from "@angular/platform-browser"; +import { NgModule } from "@angular/core"; +import { TimeagoModule } from "ngx-timeago"; @NgModule({ - imports: [ - BrowserModule, - TimeagoModule.forRoot() - ], - bootstrap: [AppComponent] + imports: [BrowserModule, TimeagoModule.forRoot()], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} ``` ##### SharedModule @@ -59,12 +55,9 @@ you can export the `TimeagoModule` to make sure you don't have to import it in e ```ts @NgModule({ - exports: [ - CommonModule, - TimeagoModule - ] + exports: [CommonModule, TimeagoModule], }) -export class SharedModule { } +export class SharedModule {} ``` ##### Lazy loaded modules @@ -77,13 +70,13 @@ Since lazy loaded modules use a different injector from the rest of your applica @NgModule({ imports: [ TimeagoModule.forChild({ - formatter: {provide: TimeagoFormatter, useClass: CustomFormatter}, - clock: {provide: TimeagoClock, useClass: CustomClock}, - intl: {provide: TimeagoIntl, useClass: CustomIntl}, - }) - ] + formatter: { provide: TimeagoFormatter, useClass: CustomFormatter }, + clock: { provide: TimeagoClock, useClass: CustomClock }, + intl: { provide: TimeagoIntl, useClass: CustomIntl }, + }), + ], }) -export class LazyLoadedModule { } +export class LazyLoadedModule {} ``` ##### I18n @@ -92,13 +85,13 @@ By default, there is no intl service available, as the default formatter doesn't 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. ```ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { Timeago, TimeagoIntl, TimeagoFormatter, TimeagoCustomFormatter } from 'ngx-timeago'; -import { AppComponent } from './app'; +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... + // do extra stuff here... } @NgModule({ @@ -107,11 +100,11 @@ export class MyIntl extends TimeagoIntl { TimeagoModule.forRoot({ intl: { provide: TimeagoIntl, useClass: MyIntl }, formatter: { provide: TimeagoFormatter, useClass: TimeagoCustomFormatter }, - }) + }), ], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +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`. @@ -119,15 +112,13 @@ There is support for a large number of languages out of the box. This support is To use any of the languages provided, you will have to import the language strings and feed them to the intl service. ```ts -import { Component } from '@angular/core'; -import { TimeagoIntl } from 'ngx-timeago'; -import {strings as englishStrings} from 'ngx-timeago/language-strings/en'; +import { Component } from "@angular/core"; +import { TimeagoIntl } from "ngx-timeago"; +import { strings as englishStrings } from "ngx-timeago/language-strings/en"; @Component({ - selector: 'app', - template: ` -
- ` + selector: "app", + template: `
`, }) export class AppComponent { constructor(intl: TimeagoIntl) { @@ -139,16 +130,18 @@ export class AppComponent { 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**: + ```html
{{1553683912689 | timeago:live}}
``` + And in your component define live (`true` by default). This is how you use the **directive**: + ```html
``` @@ -168,12 +161,12 @@ Once you've defined your formatter, you can provide it in your configuration. imports: [ BrowserModule, TimeagoModule.forRoot({ - formatter: {provide: TimeagoFormatter, useClass: CustomFormatter} - }) + formatter: { provide: TimeagoFormatter, useClass: CustomFormatter }, + }), ], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} ``` #### Write your own clock @@ -181,8 +174,8 @@ export class AppModule { } The only required method to build your own clock, is `tick` that must return an `Observable`. Whenever this observable emits, the timestamp will be updated, using your formatter (and intl, if available). ```ts -import { TimeagoClock } from 'ngx-timeago'; -import { Observable, interval } from 'rxjs'; +import { TimeagoClock } from "ngx-timeago"; +import { Observable, interval } from "rxjs"; // ticks every 2s export class MyClock extends TimeagoClock { @@ -199,17 +192,17 @@ Setup the clock in your module import by adding it to the `forRoot` (or `forChil imports: [ BrowserModule, TimeagoModule.forRoot({ - clock: {provide: TimeagoClock, useClass: MyClock}, - }) + clock: { provide: TimeagoClock, useClass: MyClock }, + }), ], - providers: [ - ], - bootstrap: [AppComponent] + providers: [], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} ``` ## Contribute + `ngx-timeago` is packaged with [ng-packagr](https://github.com/dherges/ng-packagr) and then imported into an Angular CLI app. To run the demo, do the following steps: @@ -219,5 +212,6 @@ $ npm run build:lib $ npm start ``` -*** +--- + MIT © [Vasilis Diakomanolis](https://github.com/ihym) diff --git a/angular.json b/angular.json index 45ec8af..e4a5e9a 100644 --- a/angular.json +++ b/angular.json @@ -105,5 +105,8 @@ } } } + }, + "cli": { + "analytics": false } }