Angular pretty phone number pipe

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).