Moment.JS pipes for Angular2 (timeago and more)
npm install angular2-momentnpm install --save angular2-moment
typings install --save moment
npm install moment --save
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
'moment': {
main: './moment.js',
defaultExtension: 'js'
},
'angular2-moment': {
main: './index.js',
defaultExtension: 'js'
}
}
`
Usage
-----
Import MomentModule into your app's modules:
` typescript
import { MomentModule } from 'angular2-moment';
@NgModule({
imports: [
MomentModule
]
})
`
This makes all the angular2-moment pipes available for use in your app components.
Available pipes
---------------
amTimeAgo pipe
Takes an optional omitSuffix argument that defaults to false.
` typescript
@Component({
selector: 'app',
template:
})
`
Prints Last updated: a few seconds ago
` typescript
@Component({
selector: 'app',
template:
})
`
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 for details.
` typescript
@Component({
selector: 'app',
template:
})
`
Prints Last updated: Today at 14:00 (default referenceTime is today by default)
` typescript
@Component({
selector: 'app',
template:
})
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:
})
`
Prints Last updated: Same Day at 2:00 PM
amDateFormat pipe
` typescript
@Component({
selector: 'app',
template:
})
`
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:
})
`
Prints Last updated: January 24, 2016
amLocal pipe
Converts UTC time to local time.
` typescript
@Component({
selector: 'app',
template:
})
`
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:
})
`
Prints Last updated: January 24th 2016, 2:23:45 pm
amFromUnix pipe
` typescript
@Component({
selector: 'app',
template:
})
`
Prints Last updated: 01:46PM
amDuration pipe
` typescript
@Component({
selector: 'app',
template:
})
`
Prints Uptime: 6 minutes
amDifference pipe
` typescript
@Component({
selector: 'app',
template:
})
`
Prints Expiration: 1 day
amAdd and amSubtract pipes
Use these pipes to perform date arithmetics. See momentjs docs for details.
` typescript
@Component({
selector: 'app',
template:
})
`
Prints Expiration: 2017-03-17 18:55
` typescript
@Component({
selector: 'app',
template:
})
`
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:
})
`
Prints 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:
})
`
Prints Last updated: 2017-01-01
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 'angular2-moment';
@Component({
selector: 'app',
template:
})
export class AppComponent {
myDate: Date;
constructor() {
this.myDate = new Date();
}
}
@NgModule({
imports: [
BrowserModule,
MomentModule
],
declarations: [ AppComponent ]
bootstrap: [ AppComponent ]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
``