{"_id":"@aymericlg/ion-intl-tel","_rev":"9-a889632b68a5f8eb6f48bccd06e54787","name":"@aymericlg/ion-intl-tel","dist-tags":{"latest":"2.3.7"},"versions":{"2.3.1":{"name":"@aymericlg/ion-intl-tel","version":"2.3.1","keywords":["ionic 6","ion-intl-tel","intl tel input","intl","tel","input","international","phone","phonenumber","telephone","number","elktech"],"author":{"url":"Clicklab","name":"Aymeric Laurent Guenver"},"license":"See license in LICENSE","_id":"@aymericlg/ion-intl-tel@2.3.1","maintainers":[{"name":"aymeric-lg","email":"aymericl.info@gmail.com"}],"homepage":"https://github.com/aymericl/ion-intl-tel","bugs":{"url":"https://github.com/aymericl/ion-intl-tel/issues"},"dist":{"shasum":"a9447b2fa1f247364ffe7fab9b21306ecd218bb2","tarball":"https://registry.npmjs.org/@aymericlg/ion-intl-tel/-/ion-intl-tel-2.3.1.tgz","fileCount":29,"integrity":"sha512-17moyqNliW3Lq0vET1wGx4jvnL8QS6sHfUYdzKaLbGlq12DrMrZyeJF5iQKUjmkFVXX9ZHV1XLYZnjE9hvoEwQ==","signatures":[{"sig":"MEUCIDcAC0jkiFyjKgo+ldBmgtBPm0Pk2I4ihCqjHJ9AmKboAiEAyVuwqMyC/Ts30QvqodpuKa3YyViVqr3Pqv0qFE6ZS8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":656305},"title":"Ion Intl Tel","module":"fesm2022/aymericlg-ion-intl-tel.mjs","exports":{".":{"esm":"./esm2022/aymericlg-ion-intl-tel.mjs","types":"./index.d.ts","default":"./fesm2022/aymericlg-ion-intl-tel.mjs","esm2022":"./esm2022/aymericlg-ion-intl-tel.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"161fd0c186746093af1e48b953498664ca86b28d","private":false,"typings":"index.d.ts","_npmUser":{"name":"aymeric-lg","email":"aymericl.info@gmail.com"},"repository":{"url":"git+https://github.com/aymericl/ion-intl-tel.git","type":"git"},"_npmVersion":"9.6.7","description":"This is an continuation of the original project from azzamasghar1 (https://github.com/azzamasghar1/ion-intl-tel-input) which includes new features and some much requested features","directories":{},"sideEffects":false,"_nodeVersion":"20.3.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"flag-icons":"^7.0.0","libphonenumber-js":"^1.10.52"},"_npmOperationalInternal":{"tmp":"tmp/ion-intl-tel_2.3.1_1712074487995_0.5458910921134501","host":"s3://npm-registry-packages"}},"2.3.2":{"name":"@aymericlg/ion-intl-tel","version":"2.3.2","keywords":["ionic 6","ion-intl-tel","intl tel input","intl","tel","input","international","phone","phonenumber","telephone","number","elktech"],"author":{"url":"Clicklab","name":"Aymeric Laurent Guenver"},"license":"See license in LICENSE","_id":"@aymericlg/ion-intl-tel@2.3.2","maintainers":[{"name":"aymeric-lg","email":"aymericl.info@gmail.com"}],"homepage":"https://github.com/aymericl/ion-intl-tel","bugs":{"url":"https://github.com/aymericl/ion-intl-tel/issues"},"dist":{"shasum":"b0a3cfd56ca0ead258dc79a780c8ab3e55792b0b","tarball":"https://registry.npmjs.org/@aymericlg/ion-intl-tel/-/ion-intl-tel-2.3.2.tgz","fileCount":29,"integrity":"sha512-XkKODlxXUr7qMK2GKXKsukNfrqWMh0RNjzJ2Y3JUWAh3/p2n0Tw8DVzI/hNCZQ0/+kk43pL4rCxZGpYzIw6oIg==","signatures":[{"sig":"MEYCIQDO+MFUW+Ma6c9zAHNXouDODVY7XrpCYjvytU9S1X7kgQIhAOA5ocznXfZeIIfBuSFlYQgTyr0vdkdudJocwcPhzyeR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":656322},"title":"Ion Intl Tel","module":"fesm2022/aymericlg-ion-intl-tel.mjs","exports":{".":{"esm":"./esm2022/aymericlg-ion-intl-tel.mjs","types":"./index.d.ts","default":"./fesm2022/aymericlg-ion-intl-tel.mjs","esm2022":"./esm2022/aymericlg-ion-intl-tel.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"1f3f7b906f4cbb8d489eef35a4249ce0c6719ab4","private":false,"typings":"index.d.ts","_npmUser":{"name":"aymeric-lg","email":"aymericl.info@gmail.com"},"repository":{"url":"git+https://github.com/aymericl/ion-intl-tel.git","type":"git"},"_npmVersion":"9.6.7","description":"This is an continuation of the original project from azzamasghar1 (https://github.com/azzamasghar1/ion-intl-tel-input) which includes new features and some much requested features","directories":{},"sideEffects":false,"_nodeVersion":"20.3.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"flag-icons":"^7.0.0","libphonenumber-js":"^1.10.52"},"_npmOperationalInternal":{"tmp":"tmp/ion-intl-tel_2.3.2_1712075120636_0.9066719524115772","host":"s3://npm-registry-packages"}},"2.3.3":{"name":"@aymericlg/ion-intl-tel","version":"2.3.3","keywords":["ionic 8","ion-intl-tel","intl tel input","intl","tel","input","international","phone","phonenumber","telephone","number","elktech"],"author":{"url":"Clicklab","name":"Aymeric Laurent Guenver"},"license":"See license in LICENSE","_id":"@aymericlg/ion-intl-tel@2.3.3","maintainers":[{"name":"aymeric-lg","email":"aymericl.info@gmail.com"}],"homepage":"https://github.com/aymericl/ion-intl-tel","bugs":{"url":"https://github.com/aymericl/ion-intl-tel/issues"},"dist":{"shasum":"da9510e224127158d1cd23b9c9006f37e85b2fc0","tarball":"https://registry.npmjs.org/@aymericlg/ion-intl-tel/-/ion-intl-tel-2.3.3.tgz","fileCount":29,"integrity":"sha512-lsq4Uu3n2/tehZRgU3+0ZThy69kH1jLngz97Mvppd5a38SI53IYhCgpN1DhcVFhvLE88wVsLXulm4N46nu92oA==","signatures":[{"sig":"MEUCIQCEiS5us/ui1pr4tHf50DPE4+W25rfgJLlaOhq8ISQ2xAIgRb+l5kwn11Y/jVM/M98l5+RxhK4OiV9rZrXa8gtg2es=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":656706},"title":"Ion Intl Tel","module":"fesm2022/aymericlg-ion-intl-tel.mjs","exports":{".":{"esm":"./esm2022/aymericlg-ion-intl-tel.mjs","types":"./index.d.ts","default":"./fesm2022/aymericlg-ion-intl-tel.mjs","esm2022":"./esm2022/aymericlg-ion-intl-tel.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"a98ede03fe69fe304f571948c35b0f3822ec53fe","private":false,"typings":"index.d.ts","_npmUser":{"name":"aymeric-lg","email":"aymericl.info@gmail.com"},"repository":{"url":"git+https://github.com/aymericl/ion-intl-tel.git","type":"git"},"_npmVersion":"9.6.7","description":"This is an continuation of the original project from azzamasghar1 (https://github.com/azzamasghar1/ion-intl-tel-input) which includes new features and some much requested features","directories":{},"sideEffects":false,"_nodeVersion":"20.3.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"flag-icons":"^7.0.0","libphonenumber-js":"^1.10.52"},"_npmOperationalInternal":{"tmp":"tmp/ion-intl-tel_2.3.3_1714752439559_0.44515465405864196","host":"s3://npm-registry-packages"}},"2.3.4":{"name":"@aymericlg/ion-intl-tel","version":"2.3.4","keywords":["ionic 8","ion-intl-tel","intl tel input","intl","tel","input","international","phone","phonenumber","telephone","number","elktech"],"author":{"url":"Clicklab","name":"Aymeric Laurent Guenver"},"license":"See license in LICENSE","_id":"@aymericlg/ion-intl-tel@2.3.4","maintainers":[{"name":"aymeric-lg","email":"aymericl.info@gmail.com"}],"homepage":"https://github.com/aymericl/ion-intl-tel","bugs":{"url":"https://github.com/aymericl/ion-intl-tel/issues"},"dist":{"shasum":"f7dda98cafbdcce654e988184999cf2bf69fa10c","tarball":"https://registry.npmjs.org/@aymericlg/ion-intl-tel/-/ion-intl-tel-2.3.4.tgz","fileCount":29,"integrity":"sha512-vOZQ9qu3ucz3oPCQ0jOJxLB7pfxfTqPsJ6oHZPbmIdzXLqGAEGyvaSkRnoyJJ21+ZPdzeqzi2DoRBfTpxooB3Q==","signatures":[{"sig":"MEYCIQCpahaijvjUYaDy4vSeHu6QY+77XqoXD5Rl2Imxwq3FGwIhAPsSYKIyuyE2y6L3p9/YI/nxDFGYwWmfv7Mq0le94/Gm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":656747},"title":"Ion Intl Tel","module":"fesm2022/aymericlg-ion-intl-tel.mjs","exports":{".":{"esm":"./esm2022/aymericlg-ion-intl-tel.mjs","types":"./index.d.ts","default":"./fesm2022/aymericlg-ion-intl-tel.mjs","esm2022":"./esm2022/aymericlg-ion-intl-tel.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"5780ed94fca0c51701fce3414ddcab7ff2ba7a80","private":false,"typings":"index.d.ts","_npmUser":{"name":"aymeric-lg","email":"aymericl.info@gmail.com"},"repository":{"url":"git+https://github.com/aymericl/ion-intl-tel.git","type":"git"},"_npmVersion":"9.6.7","description":"This is an continuation of the original project from azzamasghar1 (https://github.com/azzamasghar1/ion-intl-tel-input) which includes new features and some much requested features","directories":{},"sideEffects":false,"_nodeVersion":"20.3.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"flag-icons":"^7.0.0","libphonenumber-js":"^1.10.52"},"_npmOperationalInternal":{"tmp":"tmp/ion-intl-tel_2.3.4_1716363141163_0.3833451559595058","host":"s3://npm-registry-packages"}},"2.3.5":{"name":"@aymericlg/ion-intl-tel","version":"2.3.5","keywords":["ionic 8","ion-intl-tel","intl tel input","intl","tel","input","international","phone","phonenumber","telephone","number","elktech"],"author":{"url":"Clicklab","name":"Aymeric Laurent Guenver"},"license":"See license in LICENSE","_id":"@aymericlg/ion-intl-tel@2.3.5","maintainers":[{"name":"aymeric-lg","email":"aymericl.info@gmail.com"}],"homepage":"https://github.com/aymericl/ion-intl-tel","bugs":{"url":"https://github.com/aymericl/ion-intl-tel/issues"},"dist":{"shasum":"74e683982c3fa2d99066ab12467568cde063be3e","tarball":"https://registry.npmjs.org/@aymericlg/ion-intl-tel/-/ion-intl-tel-2.3.5.tgz","fileCount":29,"integrity":"sha512-tF/I35lPeVjO0HPPJJt1Xtm6Nt1FK07aZGnP8Zbh3z4m4ll3bbro2N8JzA541vd4th/fwiVJw3LjCdz2wNq0Nw==","signatures":[{"sig":"MEUCIGx+7UWNYZI5Sb4ZVNTwSAee1saQjEEz4kiyzgRfkZYaAiEAo+2gPRtv6U7ok2BxD3JsfnPnAeYhkBVPIxY5l3ktnkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":656869},"title":"Ion Intl Tel","module":"fesm2022/aymericlg-ion-intl-tel.mjs","exports":{".":{"esm":"./esm2022/aymericlg-ion-intl-tel.mjs","types":"./index.d.ts","default":"./fesm2022/aymericlg-ion-intl-tel.mjs","esm2022":"./esm2022/aymericlg-ion-intl-tel.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"5780ed94fca0c51701fce3414ddcab7ff2ba7a80","private":false,"typings":"index.d.ts","_npmUser":{"name":"aymeric-lg","email":"aymericl.info@gmail.com"},"repository":{"url":"git+https://github.com/aymericl/ion-intl-tel.git","type":"git"},"_npmVersion":"9.6.7","description":"This is an continuation of the original project from azzamasghar1 (https://github.com/azzamasghar1/ion-intl-tel-input) which includes new features and some much requested features","directories":{},"sideEffects":false,"_nodeVersion":"20.3.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"flag-icons":"^7.0.0","libphonenumber-js":"^1.10.52"},"_npmOperationalInternal":{"tmp":"tmp/ion-intl-tel_2.3.5_1716363961870_0.5101946388701455","host":"s3://npm-registry-packages"}},"2.3.6":{"name":"@aymericlg/ion-intl-tel","version":"2.3.6","keywords":["ionic 8","ion-intl-tel","intl tel input","intl","tel","input","international","phone","phonenumber","telephone","number","elktech"],"author":{"url":"Clicklab","name":"Aymeric Laurent Guenver"},"license":"See license in LICENSE","_id":"@aymericlg/ion-intl-tel@2.3.6","maintainers":[{"name":"aymeric-lg","email":"aymericl.info@gmail.com"}],"homepage":"https://github.com/aymericl/ion-intl-tel","bugs":{"url":"https://github.com/aymericl/ion-intl-tel/issues"},"dist":{"shasum":"8a33e774f534703fd8513346b7c3ff75a08e517e","tarball":"https://registry.npmjs.org/@aymericlg/ion-intl-tel/-/ion-intl-tel-2.3.6.tgz","fileCount":29,"integrity":"sha512-AXK9fbhYjtZOf/GFbT7c/i/R9nIgCTuyRcVUuz8dSHKo5XYdP95bp679o0m/Dv6ydogRUKJyHgwDYFI0ODlFCw==","signatures":[{"sig":"MEUCIHil2PYxZOI1i7m4YXqt/RqOPcgfMVY2+YnC1yQASebvAiEAuI2GdP1BQE5QoTw7evlStiSRMXuHmon+PIo30Vj//b0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657207},"title":"Ion Intl Tel","module":"fesm2022/aymericlg-ion-intl-tel.mjs","exports":{".":{"esm":"./esm2022/aymericlg-ion-intl-tel.mjs","types":"./index.d.ts","default":"./fesm2022/aymericlg-ion-intl-tel.mjs","esm2022":"./esm2022/aymericlg-ion-intl-tel.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"7cd6486efe6736c8da0d06a9947dc067a249e2d6","private":false,"typings":"index.d.ts","_npmUser":{"name":"aymeric-lg","email":"aymericl.info@gmail.com"},"repository":{"url":"git+https://github.com/aymericl/ion-intl-tel.git","type":"git"},"_npmVersion":"9.6.7","description":"This is an continuation of the original project from azzamasghar1 (https://github.com/azzamasghar1/ion-intl-tel-input) which includes new features and some much requested features","directories":{},"sideEffects":false,"_nodeVersion":"20.3.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"flag-icons":"^7.0.0","libphonenumber-js":"^1.10.52"},"_npmOperationalInternal":{"tmp":"tmp/ion-intl-tel_2.3.6_1724338353793_0.05179759256534999","host":"s3://npm-registry-packages"}},"2.3.7":{"version":"2.3.7","name":"@aymericlg/ion-intl-tel","title":"Ion Intl Tel","private":false,"description":"This is an continuation of the original project from azzamasghar1 (https://github.com/azzamasghar1/ion-intl-tel-input) which includes new features and some much requested features","author":{"name":"Aymeric Laurent Guenver","url":"Clicklab"},"license":"See license in LICENSE","homepage":"https://github.com/aymericl/ion-intl-tel","repository":{"type":"git","url":"git+https://github.com/aymericl/ion-intl-tel.git"},"bugs":{"url":"https://github.com/aymericl/ion-intl-tel/issues"},"keywords":["ionic 8","ion-intl-tel","intl tel input","intl","tel","input","international","phone","phonenumber","telephone","number","elktech"],"peerDependencies":{"flag-icons":"^7.2.3","libphonenumber-js":"^1.11.7"},"module":"fesm2022/aymericlg-ion-intl-tel.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/aymericlg-ion-intl-tel.mjs","esm":"./esm2022/aymericlg-ion-intl-tel.mjs","default":"./fesm2022/aymericlg-ion-intl-tel.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"gitHead":"7cd6486efe6736c8da0d06a9947dc067a249e2d6","_id":"@aymericlg/ion-intl-tel@2.3.7","_nodeVersion":"20.3.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-B4j2NnbEAtc0EXXyrDRMVQxxtfnaoLPq9tulz9QZh5v8JLSwaQdqh67v0MCXVYRLxTVijOqV9kpIVUI1SwVcNg==","shasum":"f0925533f2f1c2506bf8b335233e84e4b844fc73","tarball":"https://registry.npmjs.org/@aymericlg/ion-intl-tel/-/ion-intl-tel-2.3.7.tgz","fileCount":29,"unpackedSize":657203,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqSSkZPW0El2KqoQLes4kYtkre82gPYj3eF1ZdQYgBVAiEAh2RY4wSl7am8tjAH9DrkxdbMF/98tIcuhQg0ZNIkM5o="}]},"_npmUser":{"name":"aymeric-lg","email":"aymericl.info@gmail.com"},"directories":{},"maintainers":[{"name":"aymeric-lg","email":"aymericl.info@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ion-intl-tel_2.3.7_1724339460154_0.40984573893344467"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-02T16:14:47.872Z","modified":"2024-08-22T15:11:00.643Z","2.3.0":"2023-12-21T09:00:10.991Z","2.3.1":"2024-04-02T16:14:48.296Z","2.3.2":"2024-04-02T16:25:20.885Z","2.3.3":"2024-05-03T16:07:19.812Z","2.3.4":"2024-05-22T07:32:21.406Z","2.3.5":"2024-05-22T07:46:02.015Z","2.3.6":"2024-08-22T14:52:34.057Z","2.3.7":"2024-08-22T15:11:00.442Z"},"bugs":{"url":"https://github.com/aymericl/ion-intl-tel/issues"},"author":{"name":"Aymeric Laurent Guenver","url":"Clicklab"},"license":"See license in LICENSE","homepage":"https://github.com/aymericl/ion-intl-tel","keywords":["ionic 8","ion-intl-tel","intl tel input","intl","tel","input","international","phone","phonenumber","telephone","number","elktech"],"repository":{"type":"git","url":"git+https://github.com/aymericl/ion-intl-tel.git"},"description":"This is an continuation of the original project from azzamasghar1 (https://github.com/azzamasghar1/ion-intl-tel-input) which includes new features and some much requested features","maintainers":[{"name":"aymeric-lg","email":"aymericl.info@gmail.com"}],"readme":"# Interstellus Ionic International Telephone \n\nAn Ionic component for International Phone Number Input, that allows all countries, validation with google phone lib, limited countries, preferred countries, virtual scrolling and much more.\n\n## Contents\n- [Interstellus Ionic International Telephone Input](#interstellus-ionic-international-telephone-input)\n  * [Contents](#Contents)\n  * [Supported Ionic versions](#Supported-Ionic-Versions)\n  * [Supported Angular versions](#Supported-Angular-Versions)\n  * [Getting Started](#Getting-Started)\n    + [Step 1: Install it.](#Step-1-Install-it)\n    + [Step 2: Import it.](#Step-2-Import-it)\n    + [Step 3: Add it to template.](#Step-3-Add-it-to-template)\n    + [Step 4: Configure it.](#Step-4-Configure-it)\n    + [Step 5: Add validation.](#Step-5-Add-validation)\n    + [Step 6: Configure validation.](#Step-6-Configure-validation)\n  * [Options](#Options)\n  * [Events](#Events)\n  * [Contributing](#Contributing)\n  * [Versioning](#Versioning)\n  * [Authors](#Authors)\n  * [License](#License)\n  * [Acknowledgments](#Acknowledgments)\n\n\n## Supported Ionic Versions\n\n- Ionic 6 (>=6.0.0)\n\n## Supported Angular Versions\n\n- Angular <=17\n\n## Getting Started\n\n### Step 1: Install it.\n#### Install Independently\n```\nnpm install ion-intl-tel-input --save\n```\n\n#### Or Install with All dependencies\n```\nnpm install ion-intl-tel flag-icon-css google-libphonenumber --save\n```\n\n#### Add flag styles\nAdd the following to your `styles` array of project in `angular.json` (located in projects root directory).\n```\n{\n  \"input\": \"node_modules/flag-icon-css/sass/flag-icon.scss\"\n}\n```\n\n### Step 2: Import it.\n\nFirst, import `IsIonIntlTelInputModule` to your `app.module.ts` that is normally located in `src\\app\\app.module.ts`.\n\n```\nimport { IonIntlTelInputModule } from 'ion-intl-tel-input';\n\n@NgModule({\n  imports: [\n    IonIntlTelInputModule\n  ]\n})\nexport class AppModule { }\n\n```\n\n**Note:** Additionally, if you are using lazy loaded pages. Check if your pages have a module file, for example, `home.module.ts`, and if they do then import `IsIonIntlTelInputModule` to each page module too.\n\n```\nimport { IonIntlTelInputModule } from 'ionic-selectable';\nimport { HomePage } from './home';\n\n@NgModule({\n  declarations: [\n    HomePage\n  ],\n  imports: [\n    IonicPageModule.forChild(HomePage),\n    IonIntlTelInputModule\n  ]\n})\nexport class HomePageModule { }\n```\n\n### Step 3: Add it to template.\n\n#### a. Usage with Template Driven Forms\n```\n<form>\n  <ion-item>\n    <ion-label position=\"stacked\">Tel Input</ion-label>\n    <ion-intl-tel-input \n      id=\"phone-number\" \n      name=\"phone-number\" \n      [(ngModel)]=\"phoneNumber\" \n      #phoneNumberControl=\"ngModel\" >\n    </ion-intl-tel-input>\n  </ion-item>\n</form>\n```\n\n#### b. Usage with Reactive Forms\n```\n<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n  <ion-item>\n    <ion-label position=\"floating\">Tel Input</ion-label>\n    <ion-intl-tel-input \n      formControlName=\"phoneNumber\" >\n    </ion-intl-tel-input>\n  </ion-item>\n</form>\n```\n\n### Step 4: Configure it.\n\n#### a. Usage with Template Driven Forms\n```\n@Component({ ... })\nexport class HomePage {\n\n  phoneNumber = '';\n\n  constructor() { }\n}\n```\n\n#### b. Usage with Reactive Forms\n```\n\n@Component({ ... })\nexport class HomePage implements OnInit {\n\n  formValue = {phoneNumber: '', test: ''};\n  form: FormGroup;\n\n  constructor() { }\n\n  ngOnInit() {\n    this.form = new FormGroup({\n      phoneNumber: new FormControl({\n        value: this.formValue.phoneNumber\n      })\n    });\n  }\n\n  get phoneNumber() { return this.form.get('phoneNumber'); }\n\n  onSubmit() {\n    console.log(this.phoneNumber.value);\n  }\n}\n```\n\n### Step 5: Add validation.\n\n#### a. Usage with Template Driven Forms\n```\n<form>\n  <ion-item>\n    <ion-label position=\"stacked\">Tel Input</ion-label>\n    <ion-intl-tel-input \n      id=\"phone-number\" \n      name=\"phone-number\" \n      [(ngModel)]=\"phoneNumber\" \n      #phoneNumberControl=\"ngModel\"\n      ionIntlTelInputValid >\n    </ion-intl-tel-input>\n  </ion-item>\n\n  <div *ngIf=\"phoneNumberControl.invalid && phoneNumberControl.touched\">\n    <ion-text color=\"danger\" *ngIf=\"phoneNumberControl.errors.required\">\n      <p class=\"ion-no-margin\"><sub>Phone is required.</sub></p>\n    </ion-text>\n    <ion-text color=\"danger\" *ngIf=\"phoneNumberControl.errors.phone\">\n      <p class=\"ion-no-margin\"><sub>Phone is not valid.</sub></p>\n    </ion-text>\n  </div>\n</form>\n```\n\n#### b. Usage with Reactive Forms\n```\n<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n  <ion-item>\n    <ion-label position=\"floating\">Tel Input</ion-label>\n    <ion-intl-tel-input \n      formControlName=\"phoneNumber\" >\n    </ion-intl-tel-input>\n  </ion-item>\n\n  <div *ngIf=\"phoneNumber.invalid && phoneNumber.touched\">\n    <ion-text color=\"danger\" *ngIf=\"phoneNumber.errors.required\">\n      <p class=\"ion-no-margin\"><sub>Phone is required.</sub></p>\n    </ion-text>\n    <ion-text color=\"danger\" *ngIf=\"phoneNumber.errors.phone\">\n      <p class=\"ion-no-margin\"><sub>Phone number is not valid.</sub></p>\n    </ion-text>\n  </div>\n</form>\n```\n\n### Step 6: Configure validation.\n\n#### a. Usage with Template Driven Forms\n```\n@Component({ ... })\nexport class HomePage {\n\n  phoneNumber = '';\n\n  constructor() { }\n}\n```\n\n#### b. Usage with Reactive Forms\n```\nimport { IonIntlTelInputValidators } from 'is-ion-intl-tel-input';\n\n@Component({ ... })\nexport class HomePage implements OnInit {\n\n  formValue = {phoneNumber: '', test: ''};\n  form: FormGroup;\n\n  constructor() { }\n\n  ngOnInit() {\n    this.form = new FormGroup({\n      phoneNumber: new FormControl({\n        value: this.formValue.phoneNumber\n      }, [\n        Validators.required,\n        IonIntlTelInputValidators.phone\n      ])\n    });\n  }\n\n  get phoneNumber() { return this.form.get('phoneNumber'); }\n\n  onSubmit() {\n    console.log(this.phoneNumber.value);\n  }\n}\n```\n\n## Options\n\n|          Option           |   Type   |    Default         | Description |\n| ------------------------- | -------- | -------            | ----------- |\n| defaultCountryiso         | string   | NULL               | Iso Code of default selected Country. |\n| dialCodePrefix            | string   | +                  | Determines whether to use `00` or `+` as dial code prefix. Available attributes are `+` and `00`. |\n| enableAutoCountrySelect   | boolean  | false              | Determines whether to select automatic country based on user input. |\n| enablePlaceholder         | boolean  | true               | Determines whether an example number will be shown as a placeholder in input. |\n| fallbackPlaceholder       | string   | NULL               | A fallaback placeholder to be used if no example number is found for a country. |\n| inputPlaceholder          | string   | NULL               | If a custom placeholder is needed for input. If this property is set it will override    `enablePlaceholder`and only this placeholder will be shown. |\n| maxLength                 | string   | 15                 | Maximum Length for input. |\n| modalTitle                | string   | Select Country     | Title of modal opened to select country dial code. |\n| modalCssClass             | string   | NULL               | CSS class to attach to dial code selection modal. |\n| modalSearchPlaceholder    | string   | Enter country name | Placeholder for input in dial code selection modal. |\n| modalCloseText            | string   | Close              | Text for close button in dial code selection modal. |\n| modalCloseButtonSlot      | string   | end                | Slot for close button in dial code selection modal. [Ionic slots](https://ionicframework.com/docs/api/item) are supported. |\n| modalCanSearch            | boolean  | true               | Determines whether dial code selection modal should be searchable or not. |\n| modalShouldBackdropClose  | boolean  | true               | Determines whether dial code selection modal is closed on backdrop click. |\n| modalShouldFocusSearchbar | boolean  | true               | Determines whether input should be focused when dial code selection modal is opened. |\n| modalSearchFailText       | string   | No countries found | Determines whether input should be focused when dial code selection modal is opened. |\n| onlyCountries             | string[] | []               | List of iso codes of manually selected countries as string, which will appear in the dropdown. **Note**: `onlyCountries` should be a string array of country iso codes. |\n| preferredCountries        | string[] | []               | List of iso codes as string of  countries, which will appear at the top in dial code selection modal. **Note**: `preferredCountries` should be a string array of country iso codes.\n| selectFirstCountry        | boolean  | true               | Determines whether first country should be selected in dial code select or not. |\n| separateDialCode          | boolean  | true               | Determines whether to visually separate dialcode into the drop down element. |\n\n## Events\n\n|   Event Name   |        Type         | Description |\n| -------------- | ------------------- | ----------- |\n| numberChange | `EventEmitter<any>` | Fires when the Phone number Input is changed. |\n| numberBlur   | `EventEmitter<any>` | Fires when the Phone number Input is blurred. |\n| numberFocus  | `EventEmitter<any>` | Fires when the Phone number Input is focused. |\n| numberInput  | `EventEmitter<any>` | Fires when the user is typing in Phone number Input. |\n| codeChange   | `EventEmitter<any>` | Fires when the dial code selection is changed. |\n| codeOpen     | `EventEmitter<any>` | Fires when the dial code selection modal is opened. |\n| codeClose    | `EventEmitter<any>` | Fires when the dial code selection modal is closed. |\n| codeSelect   | `EventEmitter<any>` | Fires when a dial code is selected in dial code selection modal. |\n\n## Contributing\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning.\n\n## Authors\n\n* **Azzam Asghar** - *Initial work* - [Azzam Asghar](https://github.com/azzamasghar1)\n\nSee also the list of [contributors](https://github.com/azzamasghar1/is-ion-intl-tel-input/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details\n\n## Acknowledgments\n\nThis project would never have been possible without the following great plugins:\n* [Ionic Selectable](https://github.com/eakoriakin/ionic-selectable) by [@eakoriakin](https://github.com/eakoriakin) \n* [International Telephone Input for Angular (NgxIntlTelInput)](https://github.com/webcat12345/ngx-intl-tel-input) by [@webcat12345](https://github.com/webcat12345)\n* [flag-icon-css](https://github.com/lipis/flag-icon-css) by [@lipis](https://github.com/lipis)\n\nSo please do go ahead and give them a star for their efforts.\n","readmeFilename":"README.md"}