davidohalloran / angular2-moment

moment.js pipes for Angular2

angular2-moment

moment.js pipes for Angular 2.0

This module works with the latest beta release of Angular 2.0.

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

Installation

npm install --save angular2-moment

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

typings install --save moment

Usage

amTimeAgo pipe

import {TimeAgoPipe} from 'angular2-moment';

@Component({
  selector: 'app',
  pipes: [TimeAgoPipe],
  template: `
    Last updated: <time>{{myDate | amTimeAgo}}</time>
  `
})

Prints Last updated: a few seconds ago

amCalendar pipe

import {CalendarPipe} from 'angular2-moment';

@Component({
  selector: 'app',
  pipes: [CalendarPipe],
  template: `
    Last updated: <time>{{myDate | amCalendar}}</time>
  `
})

Prints Last updated: Today at 14:00

amDateFormat pipe

import {DateFormatPipe} from 'angular2-moment';

@Component({
  selector: 'app',
  pipes: [DateFormatPipe],
  template: `
    Last updated: <time>{{myDate | amDateFormat:'LL'}}</time>
  `
})

Prints Last updated: January 24, 2016

amFromUnix pipe

import {DateFormatPipe, FromUnixPipe} from 'angular2-moment';

@Component({
  selector: 'app',
  pipes: [DateFormatPipe, FromUnixPipe],
  template: `
    Last updated: <time>{{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}</time>
  `
})

Prints Last updated: 01:46PM

amDuration pipe

import {DurationPipe} from 'angular2-moment';

@Component({
  selector: 'app',
  pipes: [DurationPipe],
  template: `
    Uptime: <time>{{ 365 | amDuration:'seconds' }}</time>
  `
})

Prints Uptime: 6 minutes

Complete Example

import {Component} from 'angular2/core';
import {TimeAgoPipe, CalendarPipe, DateFormatPipe} from 'angular2-moment';

@Component({
  selector: 'app',
  pipes: [TimeAgoPipe, CalendarPipe, DateFormatPipe],
  template: `
    Last updated: <b>{{myDate | amTimeAgo}}</b>, <b>{{myDate | amCalendar}}</b>, <b>{{myDate | amDateFormat:'LL'}}</b>
  `
})
export class App {
  myDate: Date;

  constructor() {
    this.myDate = new Date();
  }
}

Demo

See online demo on Plunker