# International Telephone Input for Angular (NgxIntlTelInput)
Forked from https://github.com/webcat12345/ngx-intl-tel-input
[](#contributors)
[](https://www.npmjs.com/package/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.
**Compatibility:**
Validation with [google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)
| ngx-intl-tel-input-gg | Angular |
| --------------------- | ------- |
| 2.x.x | >=21.x |
| 3.x.x | >=22.x |
## Installation
### Install Dependencies
`$ pnpm add intl-tel-input@^27.1.3`
`$ pnpm add google-libphonenumber`
The library includes the dropdown styles it needs. Bootstrap is not required.
### Add Dependency Style
Add _'intl-tel-input'_ style file:
`intl-tel-input/dist/css/intlTelInput.css`
to **angular.json** styles array:
```json
"styles": [
"intl-tel-input/dist/css/intlTelInput.css",
"src/styles.css"
],
```
### Install This Library
`$ pnpm add ngx-intl-tel-input-gg`
## Usage
### Import
Import the standalone component and Signal Forms directive:
```typescript
imports: [FormField, NgxIntlTelInputComponent];
```
## Example
Refer to the main app in this repository for a working Angular 22 example.
```html
```
Create `phoneForm` with a signal model and apply `required()` and
`phoneNumberValidator()` in its schema. The component stores
`ChangeData | null`; an empty field is `null`.
## Options
| Options | Type | Default | Description |
| ------------------------ | ------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| cssClass | `string` | `control-form` | 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` | `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.International` | Custom string to be inserted as a placeholder. |
| 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` | Maximum input length. With Signal Forms, prefer the schema constraint. |
| selectFirstCountry | `boolean` | `true` | Selects first country from `preferredCountries` if is set. If not then uses main list. |
| inputId | `string` | `phone` | Unique ID for `` element. |
| selectedCountryISO | `` | `None` | Set specific country on load. |
| separateDialCode | `boolean` | `false` | Visually separate dialcode into the drop down element. |
| countryChange | `OutputRef` | `None` | Emits the selected country. |
## 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/app` with new functionality.
- Update README.md
- Pull request.
### Helpful commands
- Build lib: `$ pnpm run build_lib`
- Copy license and readme files: `$ pnpm run copy-files`
- Create package: `$ pnpm run pack`
- Build lib and create package: `$ pnpm run package`
### Local development and debugging
- Install dependencies once: `$ pnpm install`
- Start the demo app: `$ pnpm start`
- Edit the library source under `projects/ngx-intl-tel-input/src/lib`
- The demo app imports the library directly from the workspace sources, so changes in the library are picked up by `ng serve` without packing or publishing first.
- Library unit tests: `$ pnpm test`
- One-off CI-style test run: `$ pnpm exec ng test ngx-intl-tel-input --no-watch --no-progress`
- Build only the library package: `$ pnpm run build_lib`
- Build only the demo app: `$ pnpm run build`
- For browser debugging, open the demo app in Chrome or Edge devtools. The development build keeps source maps enabled, so breakpoints map back to the TypeScript files in the library.
### Use locally
After building and creating package, you can use it locally too.
In your project run:
`$ pnpm add {{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)):
