How to Add Moment JS to an Angular Application?

In this article, we’ll see how to install MomentJs library in Angular application and we will also see how to use MomentJs in Angular app.

Here I’ll explain you 3 simple steps require to add moment js in Angular applications.

Table of Contents

3 steps to install MomentJs in Angular 14 Application

1. Install MomentJs

Here we’ll see how to install momentjs in Angular App.

Run the following command to install moment (npm package) in Angular.

npm install moment --save

2. Import moment in Angular Component file

Now we’ll see how to use moment in Angular app.

As of version 2.13.0, momentjs has full typescript support so we can import moment in Angular app by following import statement.

import * as moment from 'moment';

Now to use momentjs in component, please refer the following code.

src/app/app.component.ts


import { Component } from '@angular/core';
import * as moment from 'moment';
     
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'How to use moment in Angular Application';
    
  constructor() {
      const date = moment();
      console.log(date.format('DD/MM/YYYY'));
  } 
  
}

As you can see in the above code we have created instance of moment js by calling moment(). and we have called format method on it.

It will show following output in console.

22/06/2022

You can check all momentjs format docs from this link. Momentjs Format

3. Run Angular Application to see how momentjs works

Run the following command to run angular appliation.

ng serve

Learn More about Momentjs format function with Angular

If you want to know more about how momentjs format function work, then you can continue reading this article.

Format Dates with Moment.js

Here we’ll see different methods that we can use with momentjs.

If we’ll use these format it’ll out like below.

m = moment('2013-03-01', 'YYYY-MM-DD')
m.format()                                  // "2013-03-01T00:00:00+01:00"
m.format('dddd')                       // "Friday"
m.format('MMM Do YY')          // "Mar 1st 13"
m.fromNow()                           // "7 years ago"
m.calendar()                           // "03/01/2013"

The format() function takes a string of tokens and replace it with the corresponding date value.

A token is a substring like ‘YYYY’ or ‘d’ that Moment knows to replace with a part of the date, like the year or the day of the month.

Following are few examples that are commonly used formatting tokens for dates:

YYYY: 4-digit year ‘2019’
YY: 2-digit year ’19’
MMMM: Full-length month ‘June’
MMM: 3 character month ‘Jun’
MM: Month of the year, zero-padded ’06’
M: Month of the year ‘6’
DD: Day of the month, zero-padded ’01’
D: Day of the month ‘1’
Do: Day of the month with numeric ordinal contraction ‘1st’

Sometimes you want to add text to the format string that you can do using following statement


m.format('[Today is ] Do [of] MMMM');    // 'Today is 1st of March'

Format Times with Moment.js

Momentjs also supports formatting times. The <strong>format()</strong> function is the most robust display option, so you can display either date or time or a combination of both.

For example, here’s how you can display a date’s time in 5:30am format:


const moment = require('moment');
const m = moment(new Date('2022/06/22 05:30:00'));
m.format('h:mma'); // '5:30am'

Here’s a list of commonly used time format tokens.

HH: hour of day from 0-24, zero-padded, '14'
H: hour of day from 0-24, '14'
hh: hour of day on 12-hour clock, zero-padded, '02'
h: hour of the day on 12 hour clock, '2'
mm: minute, zero-padded, '04'
m: minute, '4'
ss: second, zero-padded
s: second
A: 'AM' or 'PM'
a: 'am' or 'pm‘

Here’s some common date formats and how to express them in Moment format strings:

'14:04': HH:mm
'14:04:03': HH:mm:ss
'2:04pm': h:mma
'2:04 PM': h:mm A

Durations with Moment.js (Parse Date Time Ago)

The moment.diff() function returns a Moment duration object that represents the difference between two moments.

For i.e

moment([2017, 0, 29]).fromNow(); // 4 years ago