THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
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 pipesto format the date. Pipes features in Angular to transform the date.
This approach is simple and not required to import of 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
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.
