International Telephone Input With Flags and Dial Codes In Angular

Introduction:

A helpful JavaScript plugin called International Telephone Input converts the ordinary input into an international telephone input with a drop-down list of country flags.

When clicking the dropdown list, it lists all the countries and their international dial codes next to their flags. Ideal for international visitors of your website.

You may combine the input with the International Telephone Input with this plugin.

The user-friendly method for entering and validating foreign phone numbers is the well-known JavaScript library.

International mobile number entry and validation using an open-source Angular plugin. Any input receives a flag dropdown with a country name and phone code to offer validation and various customization options.

Let’s do coding…

To use intl-input-phone follow the below steps:

Step1 :Add Dependency

Include dependencies in your project. This plugin depends on the following:

To utilise this plugin, please include the following cdn scripts in your project. Alternatively, you can manually download the script file and include it in the index.html file’s head section.

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

Step 2: Install Plugin

Run following command to terminal.

npm install intl-input-phone --save

Step 3: Import Module

Import the module IntlInputPhoneModule in app.module.ts file in import section.

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { IntlInputPhoneModule } from 'intl-input-phone';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    IntlInputPhoneModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update html & ts file

Copy the following code and paste it to the app.component.html and app.component.ts files respectively.

app.component.html

<div>  
  <h4>DropDown With Country Name & Dail Code</h4>
  <intl-input-phone [ConfigurationOption]="configOption1"  ></intl-input-phone>
</div>

app.componrnt.ts 

import { Component } from '@angular/core';
import { ConfigurationOptions,ContentOptionsEnum } from 'intl-input-phone';

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

  constructor() {
    this.configOption1 = new ConfigurationOptions();
    this.configOption1.OptionTextTypes = [];
    this.configOption1.OptionTextTypes.push(ContentOptionsEnum.Flag);
    this.configOption1.OptionTextTypes.push(ContentOptionsEnum.CountryName);
    this.configOption1.OptionTextTypes.push(ContentOptionsEnum.CountryPhoneCode);
   }
}

Configuration Options –

SelectorClass:

use to  set the selector for the dropdown. Default : ‘IntlPhoneNumber’.

OptionTextTypes :

Property to set which content show in option. Default : Flag, CountryPhoneCode

IsShowSearchOption:

Property to set whether user want search option or not. Default : true

IsShowAllOtherCountry:

Property to set whether show all other country in dropdown as well or not, when specify custom country list in module. Default : true

IsShowToolTip :

Property to set whether tooltip is show or not. Default : true

ContentOptionsEnum:-

1)  Flag
2) CountryName
3) CountryPhoneCode

Output: