Custom Angular Pipes and Dynamic Locale

Support more than one date format with custom pipes.

Michael Karén
Oct 8, 2018 · 4 min read
Image for post
Image for post
Book image created by Ikaika — Freepik.com

In my article Get Started with your first Angular Library I went through how to create an Angular library. This time I will start adding some useful things to it and the first thing I am going to add to it is a couple of custom pipes.

The DatePipe in Angular is great, but if you want to be able to support more than one language in your application you might want to implement your own pipe. In this article, I will show how to register your locales, create your custom pipes and then we will add them to our library.

Image for post
Image for post

If we want to just change from the default en-US locale we can do it in our app.module.ts.

You could also be more dynamic and get your locale from a service by using the FactoryProvider.

Remember to register the locale you are going to use with registerLocaleData.

But what if we want to be able to change languages in our application? Then we can’t just send the language to our bootstrapping module once and be done with it.

The built-in date and number pipes do accept locale as an argument so we could, in theory, send in a locale that we save in our session and are able to change. And for a smaller app this could be a viable solution.

What I have found works best so far is to create custom pipes that use a locale to format our dates and number. Angular recently (Angular 5?) provided us with formatDate and formatNumber. So it is quite easy now to create our own custom pipes by using these functions.

Image for post
Image for post

Implementing Pipes and Session Service

Let's start coding already!
An example of how the pipe can look is as follows:

You will also need to register the locale with Angular.
Let's create a session service where registerCulture gets called with the culture we want to use.

Another great thing to do that you might not think about is formatting your numbers. This is very similar to the date pipe:

Like this blog post? Share it on Twitter! 🐦

Updating the library

Now we can update the library with our new code and package a new version.

  1. Add local-date.pipe.ts and local-number.pipe.ts in pipes folder.
  2. Add session.service.ts in the services folder.
  3. Export all three added files from public_api.ts.
  4. Add the pipes to the declarations and exports section in lib-shared.module.ts.
Image for post
Image for post

Let's update the version, build and pack our lib-shared to the new version of our library lib-shared-0.0.2.tgz.

Let's now go over to our other project and install the updated package. Change your version of lib-shared to 0.0.2 and npm install it.

Testing the pipes

Now let's write some code to test our library.

This will let you choose between the Swedish and Norwegian locales. You can press the Norway/Sweden buttons to see how the app dynamically changes the locale.

Image for post
Image for post

And that’s it!

Now you can easily import this library to your projects whenever you need to add some local flavor to your app.

Call to Action

I always enjoy feedback so please 👏, 📝 and tweet 🐦.
Follow me on Twitter and Medium for blog updates.

Update: I have released a follow-up article on this topic called ‘Dynamic Import of Locales in Angular’.

DailyJS

JavaScript news and opinion.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store