[feature] translation support

README.md

@@ -64,6 +64,18 @@ Add `NgxIntlTelInputModule` to your module file:
 imports: [NgxIntlTelInputModule];
 ```
 
+### Translation support
+ create .json file in your app in assets/i18n/{lang}.json. That file should have following structure:
+ ```{
+ "ngx-intl-tel-input-country": {
+    "nl": "Nederland"
+    ...
+    }
+ }
+ ```
+  Fill in translations. Key - iso code ("nl"), and value - translation for country ("Nederland")).
+  If translation is missing English version is used.
+
 ## Example
 
 Refer to main app in this repository for working example.

package.json

@@ -28,6 +28,8 @@
     "@angular/platform-browser": "8.x - 13.x",
     "@angular/platform-browser-dynamic": "8.x - 13.x",
     "@angular/router": "8.x - 13.x",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
     "bootstrap": "^4.5.2",
     "core-js": "^3.6.5",
     "google-libphonenumber": "^3.2.3",

projects/ngx-intl-tel-input/src/lib/create-translate-loader.function.ts

@@ -0,0 +1,6 @@
+import { HttpClient } from "@angular/common/http";
+import { TranslateHttpLoader } from "@ngx-translate/http-loader";
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}

projects/ngx-intl-tel-input/src/lib/custom-missing-translation-handler.class.ts

@@ -0,0 +1,13 @@
+import { MissingTranslationHandler, MissingTranslationHandlerParams } from "@ngx-translate/core";
+import { defaultCountryTranslations, translationPrefix } from "./data";
+
+export class CustomMissingTranslationHandler implements MissingTranslationHandler {
+  handle(params: MissingTranslationHandlerParams) {
+
+    const {key} = params;
+    const [_, code] = key.split('.');
+
+    const defaultTranslation = defaultCountryTranslations[translationPrefix][code];
+    return defaultTranslation;
+  }
+}

projects/ngx-intl-tel-input/src/lib/data/default-country-translations.ts

@@ -0,0 +1,252 @@
+interface Code {
+  [key: string]: string
+}
+
+// to be used by missingTranslationHandler as default values
+export const defaultCountryTranslations: {"ngx-intl-tel-input-country": Code} = {
+  "ngx-intl-tel-input-country": {
+    "af": "Afghanistan (‫افغانستان‬‎)",
+    "al": "Albania (Shqipëri)",
+    "dz": "Algeria (‫الجزائر‬‎)",
+    "as": "American Samoa",
+    "ad": "Andorra",
+    "ao": "Angola",
+    "ai": "Anguilla",
+    "ag": "Antigua and Barbuda",
+    "ar": "Argentina",
+    "am": "Armenia (Հայաստան)",
+    "aw": "Aruba",
+    "au": "Australia",
+    "at": "Austria (Österreich)",
+    "az": "Azerbaijan (Azərbaycan)",
+    "bs": "Bahamas",
+    "bh": "Bahrain (‫البحرين‬‎)",
+    "bd": "Bangladesh (বাংলাদেশ)",
+    "bb": "Barbados",
+    "by": "Belarus (Беларусь)",
+    "be": "Belgium (België)",
+    "bz": "Belize",
+    "bj": "Benin (Bénin)",
+    "bm": "Bermuda",
+    "bt": "Bhutan (འབྲུག)",
+    "bo": "Bolivia",
+    "ba": "Bosnia and Herzegovina (Босна и Херцеговина)",
+    "bw": "Botswana",
+    "br": "Brazil (Brasil)",
+    "io": "British Indian Ocean Territory",
+    "vg": "British Virgin Islands",
+    "bn": "Brunei",
+    "bg": "Bulgaria (България)",
+    "bf": "Burkina Faso",
+    "bi": "Burundi (Uburundi)",
+    "kh": "Cambodia (កម្ពុជា)",
+    "cm": "Cameroon (Cameroun)",
+    "ca": "Canada",
+    "cv": "Cape Verde (Kabu Verdi)",
+    "bq": "Caribbean Netherlands",
+    "ky": "Cayman Islands",
+    "cf": "Central African Republic (République centrafricaine)",
+    "td": "Chad (Tchad)",
+    "cl": "Chile",
+    "cn": "China (中国)",
+    "cx": "Christmas Island",
+    "cc": "Cocos (Keeling) Islands",
+    "co": "Colombia",
+    "km": "Comoros (‫جزر القمر‬‎)",
+    "cd": "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)",
+    "cg": "Congo (Republic) (Congo-Brazzaville)",
+    "ck": "Cook Islands",
+    "cr": "Costa Rica",
+    "ci": "Côte d’Ivoire",
+    "hr": "Croatia (Hrvatska)",
+    "cu": "Cuba",
+    "cw": "Curaçao",
+    "cy": "Cyprus (Κύπρος)",
+    "cz": "Czech Republic (Česká republika)",
+    "dk": "Denmark (Danmark)",
+    "dj": "Djibouti",
+    "dm": "Dominica",
+    "do": "Dominican Republic (República Dominicana)",
+    "ec": "Ecuador",
+    "eg": "Egypt (‫مصر‬‎)",
+    "sv": "El Salvador",
+    "gq": "Equatorial Guinea (Guinea Ecuatorial)",
+    "er": "Eritrea",
+    "ee": "Estonia (Eesti)",
+    "et": "Ethiopia",
+    "fk": "Falkland Islands (Islas Malvinas)",
+    "fo": "Faroe Islands (Føroyar)",
+    "fj": "Fiji",
+    "fi": "Finland (Suomi)",
+    "fr": "France",
+    "gf": "French Guiana (Guyane française)",
+    "pf": "French Polynesia (Polynésie française)",
+    "ga": "Gabon",
+    "gm": "Gambia",
+    "ge": "Georgia (საქართველო)",
+    "de": "Germany (Deutschland)",
+    "gh": "Ghana (Gaana)",
+    "gi": "Gibraltar",
+    "gr": "Greece (Ελλάδα)",
+    "gl": "Greenland (Kalaallit Nunaat)",
+    "gd": "Grenada",
+    "gp": "Guadeloupe",
+    "gu": "Guam",
+    "gt": "Guatemala",
+    "gg": "Guernsey",
+    "gn": "Guinea (Guinée)",
+    "gw": "Guinea-Bissau (Guiné Bissau)",
+    "gy": "Guyana",
+    "ht": "Haiti",
+    "hn": "Honduras",
+    "hk": "Hong Kong (香港)",
+    "hu": "Hungary (Magyarország)",
+    "is": "Iceland (Ísland)",
+    "in": "India (भारत)",
+    "id": "Indonesia",
+    "ir": "Iran (‫ایران‬‎)",
+    "iq": "Iraq (‫العراق‬‎)",
+    "ie": "Ireland",
+    "im": "Isle of Man",
+    "il": "Israel (‫ישראל‬‎)",
+    "it": "Italy (Italia)",
+    "jm": "Jamaica",
+    "jp": "Japan (日本)",
+    "je": "Jersey",
+    "jo": "Jordan (‫الأردن‬‎)",
+    "kz": "Kazakhstan (Казахстан)",
+    "ke": "Kenya",
+    "ki": "Kiribati",
+    "xk": "Kosovo",
+    "kw": "Kuwait (‫الكويت‬‎)",
+    "kg": "Kyrgyzstan (Кыргызстан)",
+    "la": "Laos (ລາວ)",
+    "lv": "Latvia (Latvija)",
+    "lb": "Lebanon (‫لبنان‬‎)",
+    "ls": "Lesotho",
+    "lr": "Liberia",
+    "ly": "Libya (‫ليبيا‬‎)",
+    "li": "Liechtenstein",
+    "lt": "Lithuania (Lietuva)",
+    "lu": "Luxembourg",
+    "mo": "Macau (澳門)",
+    "mk": "Macedonia (FYROM) (Македонија)",
+    "mg": "Madagascar (Madagasikara)",
+    "mw": "Malawi",
+    "my": "Malaysia",
+    "mv": "Maldives",
+    "ml": "Mali",
+    "mt": "Malta",
+    "mh": "Marshall Islands",
+    "mq": "Martinique",
+    "mr": "Mauritania (‫موريتانيا‬‎)",
+    "mu": "Mauritius (Moris)",
+    "yt": "Mayotte",
+    "mx": "Mexico (México)",
+    "fm": "Micronesia",
+    "md": "Moldova (Republica Moldova)",
+    "mc": "Monaco",
+    "mn": "Mongolia (Монгол)",
+    "me": "Montenegro (Crna Gora)",
+    "ms": "Montserrat",
+    "ma": "Morocco (‫المغرب‬‎)",
+    "mz": "Mozambique (Moçambique)",
+    "mm": "Myanmar (Burma) (မြန်မာ)",
+    "na": "Namibia (Namibië)",
+    "nr": "Nauru",
+    "np": "Nepal (नेपाल)",
+    "nl": "Netherlands (Nederland)",
+    "nc": "New Caledonia (Nouvelle-Calédonie)",
+    "nz": "New Zealand",
+    "ni": "Nicaragua",
+    "ne": "Niger (Nijar)",
+    "ng": "Nigeria",
+    "nu": "Niue",
+    "nf": "Norfolk Island",
+    "kp": "North Korea (조선 민주주의 인민 공화국)",
+    "mp": "Northern Mariana Islands",
+    "no": "Norway (Norge)",
+    "om": "Oman (‫عُمان‬‎)",
+    "pk": "Pakistan (‫پاکستان‬‎)",
+    "pw": "Palau",
+    "ps": "Palestine (‫فلسطين‬‎)",
+    "pa": "Panama (Panamá)",
+    "pg": "Papua New Guinea",
+    "py": "Paraguay",
+    "pe": "Peru (Perú)",
+    "ph": "Philippines",
+    "pl": "Poland (Polska)",
+    "pt": "Portugal",
+    "pr": "Puerto Rico",
+    "qa": "Qatar (‫قطر‬‎)",
+    "re": "Réunion (La Réunion)",
+    "ro": "Romania (România)",
+    "ru": "Russia (Россия)",
+    "rw": "Rwanda",
+    "bl": "Saint Barthélemy (Saint-Barthélemy)",
+    "sh": "Saint Helena",
+    "kn": "Saint Kitts and Nevis",
+    "lc": "Saint Lucia",
+    "mf": "Saint Martin (Saint-Martin (partie française))",
+    "pm": "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)",
+    "vc": "Saint Vincent and the Grenadines",
+    "ws": "Samoa",
+    "sm": "San Marino",
+    "st": "São Tomé and Príncipe (São Tomé e Príncipe)",
+    "sa": "Saudi Arabia (‫المملكة العربية السعودية‬‎)",
+    "sn": "Senegal (Sénégal)",
+    "rs": "Serbia (Србија)",
+    "sc": "Seychelles",
+    "sl": "Sierra Leone",
+    "sg": "Singapore",
+    "sx": "Sint Maarten",
+    "sk": "Slovakia (Slovensko)",
+    "si": "Slovenia (Slovenija)",
+    "sb": "Solomon Islands",
+    "so": "Somalia (Soomaaliya)",
+    "za": "South Africa",
+    "kr": "South Korea (대한민국)",
+    "ss": "South Sudan (‫جنوب السودان‬‎)",
+    "es": "Spain (España)",
+    "lk": "Sri Lanka (ශ්‍රී ලංකාව)",
+    "sd": "Sudan (‫السودان‬‎)",
+    "sr": "Suriname",
+    "sj": "Svalbard and Jan Mayen",
+    "sz": "Swaziland",
+    "se": "Sweden (Sverige)",
+    "ch": "Switzerland (Schweiz)",
+    "sy": "Syria (‫سوريا‬‎)",
+    "tw": "Taiwan (台灣)",
+    "tj": "Tajikistan",
+    "tz": "Tanzania",
+    "th": "Thailand (ไทย)",
+    "tl": "Timor-Leste",
+    "tg": "Togo",
+    "tk": "Tokelau",
+    "to": "Tonga",
+    "tt": "Trinidad and Tobago",
+    "tn": "Tunisia (‫تونس‬‎)",
+    "tr": "Turkey (Türkiye)",
+    "tm": "Turkmenistan",
+    "tc": "Turks and Caicos Islands",
+    "tv": "Tuvalu",
+    "vi": "U.S. Virgin Islands",
+    "ug": "Uganda",
+    "ua": "Ukraine (Україна)",
+    "ae": "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)",
+    "gb": "United Kingdom",
+    "us": "United States",
+    "uy": "Uruguay",
+    "uz": "Uzbekistan (Oʻzbekiston)",
+    "vu": "Vanuatu",
+    "va": "Vatican City (Città del Vaticano)",
+    "ve": "Venezuela",
+    "vn": "Vietnam (Việt Nam)",
+    "wf": "Wallis and Futuna",
+    "eh": "Western Sahara (‫الصحراء الغربية‬‎)",
+    "ye": "Yemen (‫اليمن‬‎)",
+    "zm": "Zambia",
+    "zw": "Zimbabwe",
+    "ax": "Åland Islands"
+  }
+}

projects/ngx-intl-tel-input/src/lib/data/index.ts

@@ -0,0 +1,3 @@
+export { CountryCode } from './country-code';
+export { defaultCountryTranslations } from './default-country-translations';
+export { translationPrefix } from './translation-prefix';

projects/ngx-intl-tel-input/src/lib/data/translation-prefix.ts

@@ -0,0 +1 @@
+export const translationPrefix = "ngx-intl-tel-input-country";

projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html

@@ -33,7 +33,7 @@
 						<div class="iti__flag"
 							[ngClass]="country.flagClass"></div>
 					</div>
-					<span class="iti__country-name">{{country.name}}</span>
+					<span class="iti__country-name">{{translationPrefix + country.iso2 | translate }}</span>
 					<span class="iti__dial-code">+{{country.dialCode}}</span>
 				</li>
 				<li class="iti__divider"
@@ -46,7 +46,7 @@
 						<div class="iti__flag"
 							[ngClass]="country.flagClass"></div>
 					</div>
-					<span class="iti__country-name">{{country.name}}</span>
+					<span class="iti__country-name">{{ translationPrefix + country.iso2 | translate }}</span>
 					<span class="iti__dial-code">+{{country.dialCode}}</span>
 				</li>
 			</ul>

projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts

@@ -16,13 +16,14 @@ import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { setTheme } from 'ngx-bootstrap/utils';
 
+import { ChangeData } from './interfaces/change-data';
+import { Country } from './model/country.model';
 import { CountryCode } from './data/country-code';
 import { CountryISO } from './enums/country-iso.enum';
+import { PhoneNumberFormat } from './enums/phone-number-format.enum';
 import { SearchCountryField } from './enums/search-country-field.enum';
-import { ChangeData } from './interfaces/change-data';
-import { Country } from './model/country.model';
 import { phoneNumberValidator } from './ngx-intl-tel-input.validator';
-import { PhoneNumberFormat } from './enums/phone-number-format.enum';
+import { translationPrefix } from './data';
 
 @Component({
 	// tslint:disable-next-line: component-selector
@@ -85,6 +86,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
 	disabled = false;
 	errors: Array<any> = ['Phone number is required.'];
 	countrySearchText = '';
+  translationPrefix = `${translationPrefix}.`;
 
 	@ViewChild('countryList') countryList: ElementRef;
 

projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.module.ts

@@ -3,19 +3,37 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { CommonModule } from '@angular/common';
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+
+import { MissingTranslationHandler, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 
 import { NativeElementInjectorDirective } from './directives/native-element-injector.directive';
 import { NgxIntlTelInputComponent } from './ngx-intl-tel-input.component';
+import { CustomMissingTranslationHandler } from './custom-missing-translation-handler.class';
+import { createTranslateLoader } from './create-translate-loader.function';
 
 export const dropdownModuleForRoot: ModuleWithProviders<BsDropdownModule> = BsDropdownModule.forRoot();
 
+
 @NgModule({
 	declarations: [NgxIntlTelInputComponent, NativeElementInjectorDirective],
 	imports: [
 		CommonModule,
 		FormsModule,
 		ReactiveFormsModule,
+    HttpClientModule,
 		dropdownModuleForRoot,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient],
+      },
+      missingTranslationHandler: {
+        provide: MissingTranslationHandler,
+        useClass: CustomMissingTranslationHandler,
+      },
+    }),
   ],
 	exports: [NgxIntlTelInputComponent, NativeElementInjectorDirective],
 })