How to Format array of dates in typescript Angular example

How to Format array of dates in typescript Angular example

How to Format an array of dates in typescript

In this post, You will learn how to format an array of objects with date keys in the Angular application. Sometimes, You will get the data from the backend, and hold this data in an array of objects with date properties, So you want to format the date field and display it to this user.

In this example, the Following array of the object creates with the createdDate date field.

The typescript file contains this. but in real-time, The object returns from Service.

employees = [
  {
    name: "Franc",
    id: "E1",
    createdDate: "2019-10-15T18:30:00.000Z",
  },
  {
    name: "John",
    id: "E3",
    createdDate: "2021-10-15T18:30:00.000Z",
  },
];

Following are examples to format the date in the component and HTML.

HTML template component to format an array of dates using DatePipe

the template is angular HTML code that users see on the page.

Angular provides built-in date pipes to format the date. Pipes features in Angular to transform the date.

This approach is simple and not required to import any classes.

Syntax:

{{dataValue | date:"formatoptions"}}

dataValue is an object of type new Date() object.

You can see more about datePipe options🔗

Employee object is iterated using *ngFor directive and print the object angular interpolation and date object value is formatted ‘yyyy-MMM-dd’.

<div *ngFor="let employee of employees">
  {{employee.name}} {{employee.createdDate | date:'yyyy-MMM-dd '}}
</div>

And you will see in the output

Franc 2019-Oct-16
John 2021-Oct-16

Angular component to format array of dates example

First, Import DatePipe in the Application module. It throws the below error in the console if you did not import this.

NullInjectorError: No provider for DatePipe!

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DatePipe } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [**DatePipe**],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the constructor, Added private datePipe: DatePipe in the component.

Iterated an object using the map method and format the date value using this.datePipe.transform method.

import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  heading = 'angular convert array dates example';

  employees = [{
    name: "Franc",
    id: "E1",
    createdDate: "2019-10-15T18:30:00.000Z",
  },
  {
    name: "John",
    id: "E3",
    createdDate: "2021-10-15T18:30:00.000Z",
  }
  ];

  newEmployees: any[];


  constructor(private datePipe: DatePipe) {
    this.newEmployees = [];
  }
  ngOnInit() {
    console.log(this.newEmployees)

    this.employees.map((employee) => {
      this.newEmployees.push({
        id: employee.id, name: employee.name, createdDate: this.datePipe.transform(employee.createdDate, 'yyyy-dd-MMM')
      })
    })
    console.log(this.newEmployees)
  }

  submit() {
  }

}

In html template, Iterate and display the values

<div *ngFor="let employee of newEmployees">
  {{employee.name}} {{employee.createdDate }}
</div>

Output see in the browser is

Franc 2019-16-Oct
John 2021-16-Oct

Conclusion

In this tutorial, You learned the format array of date objects in typescript as well template HTML files.