# This is a fork of ngx-intl-tel-input
This fork adds Material design components to the excellent ngx-intl-tel-input component. Big thanks to the Author and Contributers of (https://www.npmjs.com/package/ngx-intl-tel-input), it was a great time saver.
# International Telephone Input for Angular (NgxIntlTelInput)
[](#contributors)
[](https://travis-ci.org/webcat12345/ngx-intl-tel-input) [](https://badge.fury.io/js/ngx-intl-tel-input) [](https://www.npmjs.com/package/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.
**Supports:**
- Angular 8
- ReactiveFormsModule
- FormsModule
- Validation with [google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)
## Installation
### Install Dependencies
```$ npm install intl-tel-input@14.1.0 --save```
```$ npm install google-libphonenumber --save```
```$ ng add ngx-bootstrap```
### Add Dependency Style
Add *'intl-tel-input'* style file:
```./node_modules/intl-tel-input/build/css/intlTelInput.css```
to **angular.json** styles array:
```json
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"./node_modules/intl-tel-input/build/css/intlTelInput.css",
"src/styles.css"
],
```
### Install This Library
```$ npm install ngx-intl-tel-input --save```
## Usage
### Import
Add ```BsDropDownModule``` and ```NgxIntlTelInputModule``` to your module file:
```javascript
imports: [
BsDropdownModule.forRoot(),
NgxIntlTelInputModule,
]
```
## Example
Refer to main app in this repository for working example.
Or this [Stackblitz Demo](https://stackblitz.com/edit/ngx-intl-tel-input-demo).
```html
```
## Options
| Options | Type | Default | Description |
| ------------------------------|------------------------|--------------------|-------------------------------------------------------------------------------------|
| cssClass | ```string``` | ```control-form``` | Bootstrap input css class or your own custom one. |
| preferredCountries | ```[]``` | ```[]``` | List of countries, which will appear at the top. |
| onlyCountries | ```[]``` | ```[]``` | List of manually selected countries, which will appear in the dropdown. |
| enableAutoCountrySelect | ```boolean``` | ```false``` | Toggle automatic country (flag) selection based on user input. |
| enablePlaceholder | ```boolean``` | ```true``` | Input placeholder text, which addapts to the country selected. |
| searchCountryFlag | ```boolean``` | ```false``` | Enables input search box for countries in the flag dropdown. |
| 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.|
| tooltipField | `````` | ```None``` | Set tooltip on flag hover. Use ```TooltipLabel``` helper enum for label type options. |
| selectFirstCountry | ```boolean``` | ```true``` | Selects first country from ```preferredCountries``` if is set. If not then uses main list. |
| phoneValidation | ```boolean``` | ```true``` | Disable phone validation. |
| selectedCountryISO | `````` | ```None```| Set specific country on load. |
| separateDialCode | ```boolean``` | ```false``` | Visually separate dialcode into the drop down element. |
## Library Contributions
- Fork repo.
- Update ```./projects/ngx-intl-tel-input```
- Build / test library.
- Update ```./src/app``` with 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 localy
After building and creating package, you can use it localy too.
In your project run:
```$ npm install --save {{path to your local '*.tgz' package file}}```
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
