Home >> Angular Q&A >> How to use Moment.JS in Angular?

How to use Moment.JS in Angular?

Last Updated: 8 Dec 2023, 3 min read

If you are wondering how to use Moment.Js in Angular then you are at the right place. Moment.Js is a JavaScript package that makes it very simple to parse, validate, manipulate, and display date as well as time in JavaScript. Some developers prefer to use it because it allows them to display dates in human-readable format according to their current location.

Yes, Moment.JS can be used in Angular and here you can see two ways to install it in Angular according to your project requirements.

1. Installing Moment.js via npm

It is one of the easiest methods of installing Moment.Js in your Angular project. Follow these steps to install it in your system.

You need to open the terminal window of your project and go to its root directory.
Now simply run the command given below to install Moment.Js as one of the dependencies for your project.

npm install moment –save

As the installation of Moment.Js is completed, you need to use the app.components.ts file to import all Angular components into Moment.Js.

import { Component } from '@angular/core';
import moment from 'moment';
 
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  currentDate: moment.Moment = moment();
 currentTime: string = moment().format('M/D/YYYY hh:mm:ss a');
  format1: string = moment().format('M/D/YYYY');
  format2: string = moment().format('MMMM D, YYYY');
  format3: string = moment().format('YYYY-MM-DD hh:mm A');
  futuredate =this.currentDate.add(1, 'days');
 
  constructor() {
console.log(moment.locale()); // en
}
}

app.component.html

<h1>Current date and Time:<br />{{ currentDate }}</h1>
<h2>Format date 1<br />{{ format1 }}</h2>
<h2>Format date 2<br />{{ format2 }}</h2>
<h2>Format date 3<br />{{ format3 }}</h2>
<h2>Tomorrow's date:<br />{{ futuredate }}</h2>

2. Using CDN

You can simply include Moment.Js in your project through CDN (Content Delivery Network) if you don’t want to add Moment.Js as a dependency.

Simply add the script given below in the <head> section of the index.html file of your project.

< script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js“>< /script >

In your Angular project, you can easily add Moment.JS as mentioned previously without following the process of importing the whole package.
It is possible that whenever you use CDN to add anything directly into a project you may face some issues related to the performance because external resources won’t be optimized according to your project requirements.

Use Moment.JS in Angular

Tagline Infotech a well-known provider of IT services, is deeply committed to assisting other IT professionals in all facets of the industry. We continuously provide comprehensive and high-quality content and products that give customers a strategic edge and assist them in improving, expanding, and taking their business to new heights by using the power of technology. You may also find us on LinkedIn, Instagram, Facebook and Twitter.