CODEWITHSUNDEEP
angularnpm
sthomas
sthomas

Reputation: 71

How to select a default country with ngx-intl-tel-input

I am using ngx-intl-tel-input in order to have an international phone number field in my Angular 7 project.

I would like to be able to set the default country of the dropdown (and therefore the accompanying placeholder) by either:

Based on the documentation for this package, I don't see a way to set a default country, only a way to set preferred countries for the dropdown and having the first country in that array auto-selected

Any thoughts on how to achieve this, other than the obvious workaround of dynamically injecting desired value for default country into the first index of the preferredCountries array?

** Update ** The reason why I did not want to use the preferredCountries array for this because then I would need it to change dynamically. I have not been able to find a way to change the dropdown countries live this since the ngx-intl-tel-input component sets the countries listed in preferredCountries by implementing OnInit

    ngOnInit() {

    this.fetchCountryData();

    if (this.preferredCountries.length) {
        this.preferredCountries.forEach(iso2 => {
            const preferredCountry = this.allCountries.filter((c) => {
                return c.iso2 === iso2;
            });

            this.preferredCountriesInDropDown.push(preferredCountry[0]);
        });
    }
    if (this.onlyCountries.length) {
        this.allCountries = this.allCountries.filter(c => this.onlyCountries.includes(c.iso2));
    }
    if (this.preferredCountriesInDropDown.length) {
        this.selectedCountry = this.preferredCountriesInDropDown[0];
    } else {
        this.selectedCountry = this.allCountries[0];
    }

If you know of a way to work around this issue, I'd be happy to use the preferredCountries array to achieve my desired behavior, however the above is what is blocking me from doing so at the moment.

Upvotes: 6

Views: 14436

Answers (3)

vishal sharma
vishal sharma

Reputation: 49

in TS :

import { CountryISO, SearchCountryField } from 'ngx-intl-tel-input';
CountryISO = CountryISO;

in HTML :

<ngx-intl-tel-input [selectedCountryISO]="CountryISO.India" ...> </ngx-intl-tel-input>

Upvotes: 0

Marina Osama
Marina Osama

Reputation: 61

you can use ng2-tel-input it works for angular 2+ enter link description here

and use this for Ex to set Egypt as default country [ng2TelInputOptions]="{initialCountry: 'eg'}", "eg" -> "Egypt".

<input [(ngModel)]="Phone_Number" required type="tel" ng2TelInput (hasError)="hasError($event)" (ng2Tel[][1]Output)="getNumber($event)" (intlTelInputObject)="telInputObject($event)" (countryChange)="onCountryChange($event)" [ng2TelInputOptions]="{initialCountry: 'eg'}"/>

Upvotes: 0

Ala Abid
Ala Abid

Reputation: 2326

As shown on github, you can set the [preferredCountries]="[yourDefaultCountryCode]", for example this will show Great Britain:

<ngx-intl-tel-input 
    [cssClass]="'custom'" 
    [preferredCountries]="['gb']" <!-- THIS ONE -->
    [enablePlaceholder]="true"
    [enableAutoCountrySelect]="true"
    name="phone" 
    formControlName="phone"></ngx-intl-tel-input>

Upvotes: 5

Related Questions