How to format dates with Angular date pipe
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Formatting dates consistently is essential for creating professional Angular applications with clear, localized date displays. As the creator of CoreUI, a widely used Angular UI library, I’ve formatted countless dates across enterprise applications. With over 11 years of Angular experience since 2014, I can tell you the most efficient solution is to use Angular’s built-in date pipe. This pipe handles formatting, localization, and timezone conversion seamlessly.
Use the date pipe in Angular templates with a format string to format dates.
// component.ts
export class AppComponent {
today = new Date()
}
<!-- template.html -->
<p>{{ today | date:'YYYY-MM-dd' }}</p>
<p>{{ today | date:'short' }}</p>
<p>{{ today | date:'fullDate' }}</p>
<p>{{ today | date:'HH:mm:ss' }}</p>
The date pipe transforms a Date object, timestamp, or ISO string into a formatted string. You can use predefined formats like 'short', 'medium', 'long', or 'fullDate', or create custom formats using pattern strings. Common patterns include YYYY for year, MM for month, dd for day, HH for hours, mm for minutes, and ss for seconds. The pipe also respects the application’s locale settings for internationalization.
Best Practice Note
This is the same approach we use in CoreUI Angular components to ensure consistent date formatting across all locales. For better performance in tables with many rows, consider formatting dates in the component rather than using pipes repeatedly, as pipes execute on every change detection cycle.
