Cách sử dụng Moment.js trong Angular 17 - Hướng dẫn đầy đủ

Moment.js là một thư viện phổ biến để làm việc với ngày và giờ trong JavaScript. Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng Moment.js trong các dự án Angular 17 của mình cùng với các ví dụ và mẹo.

Bước cho Angular 17 Cài đặt khoảnh khắc JS

• Bước 1: Tạo dự án Angular 17
• Bước 2: Cài đặt Moment JS
• Bước 3: Thêm khoảnh khắc vào tệp ts thành phần
• Bước 4: Sử dụng Thành phần mới
• Chạy ứng dụng góc

vì vậy hãy làm theo các bước ở đây:

Bước 1: Tạo dự án Angular 17

Bạn có thể dễ dàng tạo ứng dụng góc cạnh của mình bằng lệnh bên dưới:

ng new my-new-app

Bước 2: Cài đặt Moment JS

Bạn phải chạy lệnh dưới đây để cài đặt gói moment js npm trong góc.

npm install moment --save

Bước 3: Thêm khoảnh khắc vào tệp ts thành phần

Hãy sử dụng mã dưới đây cho tệp thành phần.

vì vậy, hãy cập nhật như dưới đây:

src/app/app.comComponent.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
  
import moment from 'moment';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'firstApp';
  todayDate = '';
      
  constructor() {
    this.test();
  } 
  
  test() {
      const date = moment();
      this.todayDate = date.format('M/D/YYYY');
  
      console.log(this.todayDate);
  }
}

Bước 4: Cập nhật tệp HTML thành phần

Hãy sử dụng mã dưới đây cho tệp thành phần.

vì vậy, hãy cập nhật như dưới đây:

src/app/app.comComponent.html

<h1>How to use Moment.js in Angular 17 - ItSolutionStuff.Com</h1>
       
<strong>Today Date: {{ todayDate }}</strong>

Chạy ứng dụng góc:

Tất cả các bước bắt buộc đã được thực hiện, bây giờ bạn phải nhập lệnh bên dưới và nhấn enter để chạy ứng dụng Angular:

ng serve

Bây giờ, hãy truy cập trình duyệt web của bạn, nhập URL đã cho và xem đầu ra của ứng dụng:

http://localhost:4200

Đầu ra:

#angular