moment.js pipes for Angular
This module works with Angular 5.0 and newer.
For an Angular 2 / 4 version, please install angular2-moment. For the AngularJS, please check out angular-moment.
npm install --save moment ngx-momentor if you use yarn:
yarn add moment ngx-momentDon't forget to update your systemjs.config.js:
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
'moment': {
main: './moment.js',
defaultExtension: 'js'
},
'ngx-moment': {
main: './index.js',
defaultExtension: 'js'
}
}
Import MomentModule into your app's modules:
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:
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.
Takes an optional omitSuffix argument that defaults to false.
@Component({
selector: 'app',
template: `
Last updated: {{myDate | amTimeAgo}}
`
})Prints Last updated: a few seconds ago
@Component({
selector: 'app',
template: `
Last updated: {{myDate | amTimeAgo:true}}
`
})Prints Last updated: a few seconds
Takes optional referenceTime argument (defaults to now)
and formats argument that could be output formats object or callback function.
See momentjs docs for details.
@Component({
selector: 'app',
template: `
Last updated: {{myDate | amCalendar}}
`
})Prints Last updated: Today at 14:00 (default referenceTime is today by default)
@Component({
selector: 'app',
template: `
Last updated: <time>{{myDate | amCalendar:nextDay }}</time>
`
})
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)
@Component({
selector: 'app',
template: `
Last updated: <time>{{myDate | amCalendar:{sameDay:'[Same Day at] h:mm A'} }}</time>
`
})Prints Last updated: Same Day at 2:00 PM
@Component({
selector: 'app',
template: `
Last updated: {{myDate | amDateFormat:'LL'}}
`
})Prints Last updated: January 24, 2016
Parses a custom-formatted date into a moment object that can be used with the other pipes.
@Component({
selector: 'app',
template: `
Last updated: {{'24/01/2014' | amParse:'DD/MM/YYYY' | amDateFormat:'LL'}}
`
})Prints Last updated: January 24, 2016
Converts UTC time to local time.
@Component({
selector: 'app',
template: `
Last updated: {{mydate | amLocal | amDateFormat: 'YYYY-MM-DD HH:mm'}}
`
})Prints Last updated 2016-01-24 12:34
To be used with amDateFormat pipe in order to change locale.
@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).
import 'moment/locale/de';@Component({
selector: 'app',
template: `
Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}
`
})Prints Last updated: 01:46PM
@Component({
selector: 'app',
template: `
Uptime: {{ 365 | amDuration:'seconds' }}
`
})Prints Uptime: 6 minutes
@Component({
selector: 'app',
template: `
Expiration: {{nextDay | amDifference: today :'days' : true}} days
`
})Prints Expiration: 1 day
Use these pipes to perform date arithmetics. See momentjs docs for details.
@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
@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
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.
@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
Enables UTC mode for subsequent moment operations (such as displaying the time in UTC).
@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
Parses a string but keeps the resulting Moment object in a fixed-offset timezone with the provided offset in the string.
@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)
Check if a moment is before another moment. Supports limiting granularity to a unit other than milliseconds, pass the units as second parameter
@Component({
selector: 'app',
template: `
Today is before tomorrow: {{ today | amIsBefore:tomorrow:'day' }}
`
})Prints Today is before tomorrow: true
@Component({
selector: 'app',
template: `
Tomorrow is after today: {{ tomorrow | amIsAfter:today:'day' }}
`
})Prints Tomorrow is after today: true
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 documentation for more details. |
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: <b>{{myDate | amTimeAgo}}</b>, <b>{{myDate | amCalendar}}</b>, <b>{{myDate | amDateFormat:'LL'}}</b>
`
})
export class AppComponent {
myDate: Date;
constructor() {
this.myDate = new Date();
}
}
@NgModule({
imports: [
BrowserModule,
MomentModule
],
declarations: [ AppComponent ]
bootstrap: [ AppComponent ]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);