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, you can use Moment in Angular, and there are two ways to install it in Angular depending on 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.
