The date pipe is the most convenient way to format dates with Angular. However, very often, we need to use a consistent date format throughout our application, which means that we have to pass that custom format every time we use the date pipe:<\/p>\n\n\n
<span<\/span>><\/span>Today is {{today | date: 'MM\/dd\/yy'}}<\/span<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nOf course, we could store that format in a constant and reuse that constant every time we use the pipe, but that’s not very convenient.<\/p>\n\n\n\n
Luckily for us, since Angular 15, we can now set a default date format (and timezone) by configuring a new injection token called DATE_PIPE_DEFAULT_OPTIONS<\/a><\/code>.<\/p>\n\n\n\nIt works by adding the following code to your dependency injection config (array of providers<\/code>) in app.modules.ts<\/code>:<\/p>\n\n\nproviders: [\n {\n provide<\/span>: DATE_PIPE_DEFAULT_OPTIONS, useValue<\/span>: {dateFormat<\/span>: 'MM\/dd\/yy'<\/span>}\n }\n]<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nWith such a config in place, we can use our pipe without any parameters and have our default formatting applied automatically in our entire application:<\/p>\n\n\n
<span<\/span>><\/span>Today is {{today | date}}<\/span<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n