Managing date formats in Angular apps

Wojciech Trawiński
Feb 8 · 3 min read

Undoubtedly, pipes are a striking feature of Angular framework 🔥. One of the built-in pipes is the DatePipe which takes care of proper formatting of such data. If your application makes use of the pipe in multiple places relying on other than the default date format, it may become hard to maintain or refactor when needed. In this blog post I’ll present an elegant solution to handle the problem.


Small-scale apps

When it comes to small-scale apps, a good practice is to at least keep the desired date format in a component’s class field or in a global config object:

and use it as the first argument of the DatePipe:


Complex apps

If you need to be prepared for requirements changing over time, which is usually the case with more complex apps, you should consider creating your own date pipe which provides the desired date format:

The easiest way is to make use of the built-in DatePipe object and use delegation with the given date format. As an alternative, you can use the Moment.js or date-fns library to accomplish the goal. The DatePipe object is obtained with the aid of the dependency injection, since it requires a single dependency as well. In order to make it work, you need to register it in the providers array:

Now, you can use the custom pipe in your component templates:


Need for special format

If you use the custom date pipe in your Angular application, you may face a problem that in some area/areas of the app a different than the global date format is required. Of course you could create yet another custom pipe, but that would be neither a scalable nor an elegant solution. In fact, you can make use of the dependency injection in order to retrieve the desired that format at a given level in your custom date pipe. Let’s start with creating an injection token 💉:

Then at the root level (App Module) you can add an entry to the providers array with the value of the date format required in most places of your application:

Finally, in the custom pipe you can inject the value provided under the token:

and use it in a template as before:

Now, if you need a different date format in some parts of your application, you can provide a new value under the DATE_FORMAT token either at a given component/directive level or a feature module level:

As a result, dates are rendered with the default format, unless you override it:


Conclusions

Wrapping the built-in DatePipe into a custom one which delegates operation to the base instance with a pre-defined format is an elegant and scalable solution to the date formatting problem. With the aid of the dependency injection, you can easily customize some of your application areas to present data in a non-standard way. In addition, you can grab the default (or even area-specific) date formats via a special config service which retrieves it either from the environment object or as a result of an http call (for the sake of simplicity I imported it from the file which ships in the app bundle).

Feel free to play around with the example:

I hope you liked the post and learned something new 👍 If so, please give me some applause 👏

JavaScript everyday

Wojciech Trawiński

Written by

Doing awesome things using JavaScript

JavaScript everyday

Improve your JavaScript skills everyday!

More From Medium

More on Web Development from JavaScript everyday

More on Web Development from JavaScript everyday

When to use an attribute selector for Angular components

More on Web Development from JavaScript everyday

More on Typescript from JavaScript everyday

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade