Gathering detailed insights and metrics for ngx-intl-tel-input-gg
Phone number input field to support international numbers, Angular
Installations
npm install ngx-intl-tel-input-ggDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
20.14.0
NPM Version
10.7.0
Releases
Unable to fetch releases
Contributors
2
Unable to fetch Contributors
Languages
4
TypeScript
HTML
CSS
JavaScript
TypeScript (83.96%)
HTML (6.66%)
CSS (5.05%)
JavaScript (4.34%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
guillermodelagala
Download Statistics
Total Downloads
335,064
Last Day
54
Last Week
54
Last Month
27,503
Last Year
290,826
GitHub Statistics
7 Stars
369 Commits
11 Forks
1 Branches
2 Contributors
Bundle Size
41.92 kB
Minified
11.82 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.12
Package Id
ngx-intl-tel-input-gg@1.0.12
Unpacked Size
745.47 kB
Size
251.74 kB
File Count
44
NPM Version
10.7.0
Node Version
20.14.0
Publised On
05 Jul 2024
Total Downloads
Cumulative downloads
Total Downloads
335,064
Last day
0%
54
Compared to previous day
Last week
-99%
54
Compared to previous week
Last month
-8.7%
27,503
Compared to previous month
Last year
589%
290,826
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Versions
International Telephone Input for Angular (NgxIntlTelInput)
Forked from https://github.com/webcat12345/ngx-intl-tel-input
An Angular package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
Compatibility:
Validation with google-libphonenumber
| ngx-intl-tel-input-gg | Angular | ngx-bootstrap |
|---|---|---|
| 1.x.x | 9.x.x - 17.x.x | 6.0.0 |
Installation
Install Dependencies
$ npm install intl-tel-input@17.0.3 --save
$ npm install google-libphonenumber --save
$ ng add ngx-bootstrap
If you do not wish to use Bootstrap's global CSS, we now package the project with only the relevant
bootstrap styling needed for the dropdown. As such, you can remove the bootstrap styling from angular.json.
Further, Angular CLI should tree-shake the rest of Ngx-Boostrap away if you don't utilize other dependencies from the bootstrap package. This should keep this dependency a lean feature-add
Add Dependency Style
Add 'intl-tel-input' style file:
./node_modules/intl-tel-input/build/css/intlTelInput.css
to angular.json styles array:
1 2"styles": [ 3 "./node_modules/intl-tel-input/build/css/intlTelInput.css", 4 "src/styles.css" 5], 6
Install This Library
$ npm install ngx-intl-tel-input-gg --save
Usage
Import
Add NgxIntlTelInputModule to your module file:
1imports: [NgxIntlTelInputModule];
Example
Refer to main app in this repository for working example.
Or this:
1<form #f="ngForm" [formGroup]="phoneForm"> 2 <ngx-intl-tel-input 3 [cssClass]="'custom'" 4 [preferredCountries]="[CountryISO.UnitedStates, CountryISO.UnitedKingdom]" 5 [enableAutoCountrySelect]="false" 6 [enablePlaceholder]="true" 7 [searchCountryFlag]="true" 8 [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]" 9 [selectFirstCountry]="false" 10 [selectedCountryISO]="CountryISO.India" 11 [maxLength]="15" 12 [phoneValidation]="true" 13 [inputId]="my-input-id" 14 name="phone" 15 formControlName="phone" 16 ></ngx-intl-tel-input> 17</form>
Options
| Options | Type | Default | Description |
|---|---|---|---|
| cssClass | string | control-form | Bootstrap input css class or your own custom one. |
| preferredCountries | <CountryISO>[] | [] | List of countries, which will appear at the top. |
| onlyCountries | <CountryISO>[] | [] | List of manually selected countries, which will appear in the dropdown. |
| enableAutoCountrySelect | boolean | true | Toggle automatic country (flag) selection based on user input. |
| enablePlaceholder | boolean | true | Input placeholder text, which adapts to the country selected. |
| customPlaceholder | string | None | Custom string to be inserted as a placeholder. |
| numberFormat | <PhoneNumberFormat> | PhoneNumberFormat.International | Custom string to be inserted as a placeholder. |
| searchCountryFlag | boolean | false | Enables input search box for countries in the flag dropdown. |
| searchCountryField | <SearchCountryField>[] | [SearchCountryField.All] | Customize which fields to search in, if searchCountryFlag is enabled. Use SearchCountryField helper enum. |
| searchCountryPlaceholder | string | 'Search Country' | Placeholder value for searchCountryField |
| maxLength | number | None | Add character limit. |
| selectFirstCountry | boolean | true | Selects first country from preferredCountries if is set. If not then uses main list. |
| phoneValidation | boolean | true | Disable phone validation. |
| inputId | string | phone | Unique ID for <input> element. |
| selectedCountryISO | <CountryISO> | None | Set specific country on load. |
| separateDialCode | boolean | false | Visually separate dialcode into the drop down element. |
| countryChange | <Country> | None | Emits country value when the user selects a country from the dropdown. |
Supported Formats
Following formats are supported
- NATIONAL // Produces "044 668 18 00"
- INTERNATIONAL // Produces "+41 44 668 18 00"
- E164 // Produces "+41446681800"
Library Contributions
- Fork repo.
- Update
./projects/ngx-intl-tel-input - Build / test library.
- Update
./src/appwith new functionality. - Update README.md
- Pull request.
Helpful commands
- Build lib:
$ npm run build_lib - Copy license and readme files:
$ npm run copy-files - Create package:
$ npm run npm_pack - Build lib and create package:
$ npm run package
Use locally
After building and creating package, you can use it locally too.
In your project run:
$ npm install --save {{path to your local '*.tgz' package file}}
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
No vulnerabilities found.
No security vulnerabilities found.