# ngx-moment > Moment.JS pipes for Angular (timeago and more) Latest version **6.0.2** (published 2021-12-22) · MIT license · 0 weekly downloads ## Install ```sh npm install ngx-moment pnpm add ngx-moment yarn add ngx-moment bun add ngx-moment ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 6.0.2 | | Published | 2021-12-22 | | First published | 2018-04-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 180.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Uri Shaked | | Maintainers | urish, delagen | | Keywords | angular, timeago, momentjs | ## Links - npm: https://www.npmjs.com/package/ngx-moment - Repository: https://github.com/urish/ngx-moment - Homepage: https://github.com/urish/ngx-moment#readme - Issues: https://github.com/urish/ngx-moment/issues - npm.io page: https://npm.io/package/ngx-moment ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^2.3.0 ## Alternatives - [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads - [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads - [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads - [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads - [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads ## Recent versions - 6.0.2 (latest) — 2021-12-22 - 2.0.0-beta.0 (next) — 2018-04-12 - 6.0.1 — 2021-12-20 - 6.0.0 — 2021-11-30 - 5.0.0 — 2020-07-03 - 4.0.1 — 2020-06-12 - 4.0.0 — 2020-06-12 - 3.5.0 — 2019-11-08 - 3.4.0 — 2019-03-07 - 3.3.0 — 2018-12-09 - 3.2.0 — 2018-10-30 - 3.1.0 — 2018-07-01 - 3.0.1 — 2018-06-07 - 3.0.0 — 2018-06-02 - 2.0.0 — 2018-04-25 - … 2 more at https://npm.io/package/ngx-moment/versions ## README # ngx-moment moment.js pipes for Angular [![Build Status](https://travis-ci.org/urish/ngx-moment.png?branch=master)](https://travis-ci.org/urish/ngx-moment) [![npm version](https://img.shields.io/npm/v/ngx-moment.svg)](https://www.npmjs.com/package/ngx-moment) This module works with Angular 7.0.0 and newer. For older Angular versions, please install [angular2-moment](https://npmjs.org/package/angular2-moment). For the AngularJS, please check out [angular-moment](https://github.com/urish/angular-moment). Installation ------------ ```bash npm install --save moment ngx-moment ``` or if you use yarn: ```bash yarn add moment ngx-moment ``` Usage ----- Import `MomentModule` into your app's modules: ``` typescript import { MomentModule } from 'ngx-moment'; @NgModule({ imports: [ MomentModule ] }) ``` If you would like to supply any `NgxMomentOptions` that will be made available to the pipes you can also use: ```typescript import { MomentModule } from 'ngx-moment'; @NgModule({ imports: [ MomentModule.forRoot({ relativeTimeThresholdOptions: { 'm': 59 } }) ] }) ``` This makes all the `ngx-moment` pipes available for use in your app components. Available pipes --------------- ## amTimeAgo pipe Takes an optional `omitSuffix` argument that defaults to `false` and another optional `formatFn` function which can be used to customise the format of the time ago text. ``` typescript @Component({ selector: 'app', template: ` Last updated: {{myDate | amTimeAgo}} ` }) ``` Prints `Last updated: a few seconds ago` ``` typescript @Component({ selector: 'app', template: ` Last updated: {{myDate | amTimeAgo:true}} ` }) ``` Prints `Last updated: a few seconds` ## amCalendar pipe Takes optional `referenceTime` argument (defaults to now) and `formats` argument that could be output formats object or callback function. See [momentjs docs](http://momentjs.com/docs/#/displaying/calendar-time/) for details. ``` typescript @Component({ selector: 'app', template: ` Last updated: {{myDate | amCalendar}} ` }) ``` Prints `Last updated: Today at 14:00` (default referenceTime is today by default) ``` typescript @Component({ selector: 'app', template: ` Last updated: ` }) export class AppComponent { nextDay: Date; constructor() { this.nextDay = new Date(); nextDay.setDate(nextDay.getDate() + 1); } } ``` Prints `Last updated: Yesterday at 14:00` (referenceTime is tomorrow) ``` typescript @Component({ selector: 'app', template: ` Last updated: ` }) ``` Prints `Last updated: Same Day at 2:00 PM` ## amDateFormat pipe ``` typescript @Component({ selector: 'app', template: ` Last updated: {{myDate | amDateFormat:'LL'}} ` }) ``` Prints `Last updated: January 24, 2016` ## amParse pipe Parses a custom-formatted date into a moment object that can be used with the other pipes. ``` typescript @Component({ selector: 'app', template: ` Last updated: {{'24/01/2014' | amParse:'DD/MM/YYYY' | amDateFormat:'LL'}} ` }) ``` Prints `Last updated: January 24, 2016` The pipe can also accept an array of formats as parameter. ``` typescript @Component({ selector: 'app', template: ` Last updated: {{'24/01/2014 22:00' | amParse: formats | amDateFormat:'LL'}} ` }) export class App { formats: string[] = ['DD/MM/YYYY HH:mm:ss', 'DD/MM/YYYY HH:mm']; constructor() { } } ``` Prints `Last updated: January 24, 2016` ## amLocal pipe Converts UTC time to local time. ``` typescript @Component({ selector: 'app', template: ` Last updated: {{mydate | amLocal | amDateFormat: 'YYYY-MM-DD HH:mm'}} ` }) ``` Prints `Last updated 2016-01-24 12:34` ## amLocale pipe To be used with amDateFormat pipe in order to change locale. ``` typescript @Component({ selector: 'app', template: ` Last updated: {{'2016-01-24 14:23:45' | amLocale:'en' | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}} ` }) ``` Prints `Last updated: January 24th 2016, 2:23:45 pm` Note: The locale might have to be imported (e.g. in the app module). ``` typescript import 'moment/locale/de'; ``` ## amFromUnix pipe ``` typescript @Component({ selector: 'app', template: ` Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}} ` }) ``` Prints `Last updated: 01:46PM` ## amDuration pipe ``` typescript @Component({ selector: 'app', template: ` Uptime: {{ 365 | amDuration:'seconds' }} ` }) ``` Prints `Uptime: 6 minutes` ## amDifference pipe ``` typescript @Component({ selector: 'app', template: ` Expiration: {{nextDay | amDifference: today :'days' : true}} days ` }) ``` Prints `Expiration: 1 days` ## amAdd and amSubtract pipes Use these pipes to perform date arithmetics. See [momentjs docs](http://momentjs.com/docs/#/manipulating/add/) for details. ``` typescript @Component({ selector: 'app', template: ` Expiration: {{'2017-03-17T16:55:00.000+01:00' | amAdd: 2 : 'hours' | amDateFormat: 'YYYY-MM-DD HH:mm'}} ` }) ``` Prints `Expiration: 2017-03-17 18:55` ``` typescript @Component({ selector: 'app', template: ` Last updated: {{'2017-03-17T16:55:00.000+01:00' | amSubtract: 5 : 'years' | amDateFormat: 'YYYY-MM-DD HH:mm'}} ` }) ``` Prints `Last updated: 2012-03-17 16:55` ## amFromUtc pipe Parses the date as UTC and enables mode for subsequent moment operations (such as displaying the time in UTC). This can be combined with `amLocal` to display a UTC date in local time. ``` typescript @Component({ selector: 'app', template: ` Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amFromUtc | amDateFormat: 'YYYY-MM-DD' }} ` }) ``` Prints `Last updated: 2017-01-01` It's also possible to specify a different format than the standard ISO8601. ``` typescript @Component({ selector: 'app', template: ` Last updated: {{ '31/12/2016 23:00-01:00' | amFromUtc: 'DD/MM/YYYY HH:mmZZ' | amDateFormat: 'YYYY-MM-DD' }} ` }) ``` Or even an array of formats: ``` typescript @Component({ selector: 'app', template: ` Last updated: {{ '31/12/2016 23:00-01:00' | amFromUtc: formats | amDateFormat: 'YYYY-MM-DD' }} ` }) export class App { formats: string[] = ['DD/MM/YYYY HH:mm:ss', 'DD/MM/YYYY HH:mmZZ']; constructor() { } } ``` Both examples above will print `Last updated: 2017-01-01` ## amUtc pipe Enables UTC mode for subsequent moment operations (such as displaying the time in UTC). ``` typescript @Component({ selector: 'app', template: ` Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amUtc | amDateFormat: 'YYYY-MM-DD' }} ` }) ``` Prints `Last updated: 2017-01-01` ## amParseZone pipe Parses a string but keeps the resulting Moment object in a fixed-offset timezone with the provided offset in the string. ``` typescript @Component({ selector: 'app', template: ` Last updated: {{ '2016-12-31T23:00:00.000-03:00' | amParseZone | amDateFormat: 'LLLL (Z)' }} ` }) ``` Prints `Last updated: Saturday, December 31, 2016 11:00 PM (-03:00)` ## amIsBefore and amIsAfter pipe Check if a moment is before another moment. Supports limiting granularity to a unit other than milliseconds, pass the units as second parameter ```typescript @Component({ selector: 'app', template: ` Today is before tomorrow: {{ today | amIsBefore:tomorrow:'day' }} ` }) ``` Prints `Today is before tomorrow: true` ```typescript @Component({ selector: 'app', template: ` Tomorrow is after today: {{ tomorrow | amIsAfter:today:'day' }} ` }) ``` Prints `Tomorrow is after today: true` NgxMomentOptions ---------------- An `NgxMomentOptions` object can be provided to the module using the `forRoot` convention and will provide options for the pipes to use with the `moment` instance, these options are detailed in the table below: | prop | type | description | | --- |:---:| --- | | relativeTimeThresholdOptions | Dictionary
key: string
value: number | Provides the `relativeTimeThreshold` units allowing a pipe to set the `moment.relativeTimeThreshold` values.

The `key` is a unit defined as one of `ss`, `s`, `m`, `h`, `d`, `M`.

See [Relative Time Thresholds](https://momentjs.com/docs/#/customization/relative-time-threshold/) documentation for more details. | Complete Example ---------------- ``` typescript import { NgModule, Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { MomentModule } from 'ngx-moment'; @Component({ selector: 'app', template: ` Last updated: {{myDate | amTimeAgo}}, {{myDate | amCalendar}}, {{myDate | amDateFormat:'LL'}} ` }) export class AppComponent { myDate: Date; constructor() { this.myDate = new Date(); } } @NgModule({ imports: [ BrowserModule, MomentModule ], declarations: [ AppComponent ] bootstrap: [ AppComponent ] }) class AppModule {} platformBrowserDynamic().bootstrapModule(AppModule); ``` Demo ---- [See online demo on StackBlitz](https://stackblitz.com/edit/ngx-moment-demo?file=src%2Fapp%2Fapp.component.html) --- _Source: https://npm.io/package/ngx-moment · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._