aanushaR / angular2-moment

moment.js pipes for Angular2

angular2-moment

moment.js pipes for Angular 2.0

This module works with Angular 2.x.

For the stable AngularJS 1.x version of this module, please see angular-moment.

Installation

npm install --save angular2-moment

If you use typescript 1.8, and typings, you may also need to install typings for moment.js:

typings install --save moment

For System.js users:

First you need to install moment:

npm install moment --save

Don´t forget to update your systemjs.config.js:

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:

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.

@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

amCalendar pipe

Takes optional formats argument (defaults to now) and referenceTime 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

amDateFormat pipe

@Component({
  selector: 'app',
  template: `
    Last updated: {{myDate | amDateFormat:'LL'}}
  `
})

Prints Last updated: January 24, 2016

amFromUnix pipe

@Component({
  selector: 'app',
  template: `
    Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}
  `
})

Prints Last updated: 01:46PM

amDuration pipe

@Component({
  selector: 'app',
  template: `
    Uptime: {{ 365 | amDuration:'seconds' }}
  `
})

Prints Uptime: 6 minutes

amDifference pipe

@Component({
  selector: 'app',
  template: `
    Expiration: {{nextDay | amDifference: today :'days' : true}} days
  `
})

Prints Expiration: 1 day

amAdd and amSubtract pipes

Use these pipes to perform date arithmetics. See Momnet.js documentation for details.

Example for amAdd/amSubtract is needed here, Pull Requests are welcome

amUtc pipe

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

Complete Example

import {NgModule, Component} from 'angular2/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {MomentModule} from 'angular2-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);

Demo

See online demo on Plunker