Ngx-dialer-input NPM

Phone Number Input With Country Code and Flag for Angular (NgxDialerInput)

Compatibility:

ngx-dialer-input	Angular	ngx-bootstrap
16.x.x	16	>= 11.0.2
17.x.x	17	>= 11.0.2

View example

alt

Installation

Install Dependencies

$ npm install intl-tel-input --save

$ npm install google-libphonenumber --save

$ ng add ngx-bootstrap

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:

"styles": [
  "./node_modules/intl-tel-input/build/css/intlTelInput.css",
  "src/styles.css"
],

Install This Library

$ npm install ngx-dialer-input

Usage

Import

Add NgxDialerInputModule to your module file:

import { NgxDialerInputModule } from 'ngx-dialer-input';
imports: [NgxDialerInputModule];

Example

import { Component } from '@angular/core';
import { CountryISO, PhoneNumberFormat, SearchCountryField } from 'ngx-dialer-input';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test';

	separateDialCode = true;
	SearchCountryField = SearchCountryField;
	CountryISO = CountryISO;
  PhoneNumberFormat = PhoneNumberFormat;
	preferredCountries: CountryISO[] = [CountryISO.UnitedStates, CountryISO.UnitedKingdom];
}

<form [formGroup]="phoneForm">
	<ngx-dialer-input
		[cssClass]="'custom'"
		[preferredCountries]="[CountryISO.UnitedStates, CountryISO.UnitedKingdom]"
		[enableAutoCountrySelect]="false"
		[enablePlaceholder]="true"
		[searchCountryFlag]="true"
		[searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
		[selectFirstCountry]="false"
		[selectedCountryISO]="CountryISO.India"
		[maxLength]="15"
		[phoneValidation]="true"
		[inputId]="my-input-id"
		name="phone"
		formControlName="phone"
	></ngx-dialer-input>
</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.