Angular, How to Format array of dates in typescript example

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

In this example, Following array of object is declared with createdDate date field.

This is declared in Typescript file, but in real time, The object is returned 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 is an examples to format the date in the component and html.

html template component to format array of dates using DatePipe

template is angular html code which user seen in 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 output

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

Angular component to format array of dates

First, Import DatePipe in Application module, if this is not configured, you will see an below error in console

** 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 component

Iterated an object using 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 browser is

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

Conclusion

On this tutorial, You learned format array of date objects in typescript as well template html file.

Angular, How to Format array of dates in typescript example

html template component to format array of dates using DatePipe

Angular component to format array of dates

Conclusion

Typescript - Beginner Guide to type keyword with example

Typescript - How to create an empty typed array example|object or string

How to add Google Fonts into Angular application with step by step example

How to URL pattern validation example in Angular | Typescript

Angular blur event tutorial with examples

Visual studio Code - fix multiple formatters for file type Select a default formatter to continue

Angular - How to add Read more/less button/link with example | Dynamically Shorten long text with show more