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 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.
