Nathan Hammond's libphonenumber ported to an angular filter

Downloads in past


4181.1.07 years ago7 years agoMinified + gzip package size for angular-libphonenumber in KB


angular-libphonenumber - AngularJS input masks for phone numbers
| Info | Badges | | ------------- | ------------- | | Version | !Bower versionbower-imagebower-url !NPM versionnpm-imagenpm-url | | License | !Apache licenselicense-imagelicense-url | | Testing | !Build Statusbuild-imagebuild-url !Coverage Statuscoverage-imagecoverage-url | | Quality | !Dependencies statusdep-status-imagedep-status-url !Code Climatecode-climate-imagecode-climate-url |


angular-libphonenumber is an angular directive that can be used as an input mask. By default, all numbers are formatted in US format, but the format can be set with the country-code descriptor. It uses nathanhammond/libphonenumber as a formatter for phone number's, which calls Google's libphonenumber to format numbers as you type them.
View a demo here


Using Bower:
bower install --save angular-libphonenumber

You then must decide what version of libphonenumber you want. There are two included, and you must include one of them in your application before angular-libphonenumber:
  • dist/libphonenumber.js - only includes the libphonenumber code needed for typeahead to work
  • dist/libphonenumber.full.js - includes all libphonenumber functionality including typeahead

<!-- Use either -->
<script src="./<path_to_bower_components>/angular-libphonenumber/dist/libphonenumber.full.js" />
<!-- OR -->
<script src="./<path_to_bower_components>/angular-libphonenumber/dist/libphonenumber.js" />
<!-- THEN -->
<script src="./<path_to_bower_components>/angular-libphonenumber/dist/angular-libphonenumber.min.js" />

Then include it in your angular application:
angular.module('myModule', ['cwill747.phonenumber']);

How to Use

  • You need to get the user's country code from somewhere. Where you do that is up to you (setting,
local storage, angular-translate, or just another input box):
<input type="text" ng-model="countrycode" />

  • Then you just apply the input mask to any input box:

<input type="text" ng-model="phoneNumber" phone-number country-code="countrycode" />


If you are having any questions or issues getting things to work, you can:

Project's issue on GitHub should be used discuss bugs and features.

Contributing to the project

We welcome any contributions to the project. Please check the for contribution guidelines.
Check out our contributors here


Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install global dev dependencies: npm install -g gulp karma
  • Install local dev dependencies: npm install while current directory is angular-libphonenumber repo


  • Build the whole project: gulp - this will run jshint, test, and build targets


  • Use GitHub's release tool to draft and publish a release. I like the format better than