npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tboerc/ngx-moment

v16.0.3

Published

Moment.JS pipes for Angular (timeago and more)

Downloads

3

Readme

ngx-moment

moment.js pipes for Angular

Build Status npm version

This module works with Angular 7.0.0 and newer.

For older Angular versions, please install angular2-moment. For the AngularJS, please check out angular-moment.

Installation

npm install --save moment ngx-moment

or if you use yarn:

yarn add moment ngx-moment

Usage

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.

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.

@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 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

amDateFormat pipe

@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.

@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.

@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.

@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.

@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';

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 days

amAdd and amSubtract pipes

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

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.

@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.

@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:

@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).

@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.

@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

@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

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 | Dictionarykey: stringvalue: 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. |

Complete Example

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);

Demo

See online demo on StackBlitz