Angular pretty phone number pipe

Pierre R-A
Aug 29, 2017 · 1 min read
A phone and its pipe

When working with phone numbers, google made it easy by creating libphonenumber. It does all the work horse about parsing and formatting phone numbers according to their prefixes.

In this simple pipe, we are going to use one of the two recommended implementations in javascript: https://www.npmjs.com/package/libphonenumber-js

This library is a simpler version of the library and very handy in our case.

We suppose we use https://www.npmjs.com/package/@angular/cli for the project. We have to add the library to the current project:

$ npm install --save libphonenumber-js

Then, we can the following piece of code in a pipe file.

Voilà,
here we have a very simple pipe that will format any parsed phone number.

Using this pipe is straightforward in html:

All there is to do, is parsing phone numbers using forms (coming soon).

)

Pierre R-A

Written by

Towards solutions together

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