JSPM

  • Created
  • Published
  • Downloads 652
  • Score
    100M100P100Q134657F
  • License MIT

Package Exports

  • intl-tel-input-ng

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (intl-tel-input-ng) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

intl-tel-input-ng

Build Status Coverage Status npm npm

Changelog

Please read the changelog

Contributing

Use the fork, Luke. PR without tests will likely not be merged.

Installation

To install this library, run:

$ npm install intl-tel-input --save / yarn add intl-tel-input
$ npm install intl-tel-input-ng --save / yarn add intl-tel-input-ng
  • Add node_modules/intl-tel-input/build/js/utils.js to the scripts section in your angular.json.
  • Add node_modules/intl-tel-input/build/css/intlTelInput.css to the styles section in your angular.json.
  • Import IntlTelInputNgModule.forRoot() in your main application module.

What is it ?

It's an angular component to easily integrate intl-tel-input.

Options

  • label: If provided, will generate a label for the input (if the name option is set too).
  • name: Sets name and id attributes for the input.
  • cssClass: The CSS class used to style the input component.
  • required: Sets the required && aria-required attributes for the input.
  • countryCodes: List of availables country codes to display.
  • preferredCountries (array): Sets the preferred countries.
  • localizedCountries (object, ie. {}): Sets the localized countries if needed.
  • [(E164PhoneNumber)]: Outputs the phone number in E164 format if valid.

See the intl-tel-input repository for documentation.

Example:

 <intl-tel-input
       [label]="'Please enter your phone number'"
       [name]="'my-name'"
       [cssClass]="'form-control'"
       [required]="true"
       [countryCodes]="['fr', 'ch']"
       [preferredCountries]="['ch']"
       [localizedCountries]="{ ch: 'Suisse' }"
       [(E164PhoneNumber)]="E164PhoneNumber"></intl-tel-input>