add preferred countries and focus input after change country

[jiarongxu]

Use this for preferred countries

preferredCountries = ['us', 'au', 'ru', 'gb'];

<ngx-intl-tel-input [(value)]="phone_number" [preferredCountries]="preferredCountries">

[webcat12345]

Thanks for your new feature.
Merged. And updated Demo.
Will update library this weekend.

[kaushalkishorejaiswal]

The default option for dropdown is open. Is there any option available to open dropdown on click event ?

[saiidabs]

how can i change the preferredCountries during runtime, simply updating the array doesnt work

[jiarongxu]

@saiidabs My pull request didn't implement change preferredCountries during runtime. Maybe I can look into later, but I am not sure this repo is still active since there is pull request from 28 days ago. You also can implement the feature and commit it.

[nitishthakrarsa]

How can I get or set value in phone number as I am passing the number or string with country code it isn't work.

FYI : I am using form builder.

[lakshbhutani]

How can I increase the width of this input ??

[Conrekatsu]

How can I increase the width of this input ??

what I did is edit the css file of the plugin you can change everything there

[marcin86mak]

Hello
I have suggestions for changes so that value works as it should be because they do not work and there is a mistake
I am adding my versions of the script below

ngx-intl-tel-input.component.d.ts

import {OnInit, EventEmitter, OnChanges, SimpleChanges} from '@angular/core';  // **Update**
import { CountryCode } from './resource/country-code';
import { Country } from './model/country.model';
export declare class NgxIntlTelInputComponent implements OnInit, OnChanges { // **Update**
    private countryCodeData;
    value: string;
    valueData: string; // **add new**
    preferredCountries: Array<string>;
    valueChange: EventEmitter<string>;
    valueEmit: EventEmitter<string>; // **add new**
    phone_number: string;
    allCountries: Array<Country>;
    preferredCountriesInDropDown: Array<Country>;
    selectedCountry: Country;
    constructor(countryCodeData: CountryCode);
    ngOnInit(): void;
    ngOnChanges(changes: SimpleChanges): void; // **add new**
    onPhoneNumberChange(): void;
    onCountrySelect(country: Country, el: any): void;
    onInputKeyPress(event: any): void;
    protected fetchCountryData(): void;
    protected getPhoneNumberPlaceHolder(countryCode: string): string;
}

index.js

import { Component, EventEmitter, Injectable, Input, NgModule, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber';
import * as _ from 'google-libphonenumber';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

var CountryCode = (function () {
    function CountryCode() {
        this.allCountries = [
            [
                'Afghanistan (‫افغانستان‬‎)',
                'af',
                '93'
            ],
           // **... cdn**
        ];
    }
    return CountryCode;
}());

var Country = (function () {
    function Country() {
        this.name = '';
        this.iso2 = '';
        this.dialCode = '';
        this.priority = 0;
        this.areaCode = null;
        this.flagClass = '';
        this.placeHolder = '';
    }
    return Country;
}());

var NgxIntlTelInputComponent = (function () {
    /**
     * @param {?} countryCodeData
     */
    function NgxIntlTelInputComponent(countryCodeData) {
        this.countryCodeData = countryCodeData;
        this.value = '';
        this.valueData = ''; // add new
        this.preferredCountries = [];
        this.valueChange = new EventEmitter();
        this.valueEmit = new EventEmitter(); // add new
        this.phone_number = '';
        this.allCountries = [];
        this.preferredCountriesInDropDown = [];
        this.selectedCountry = new Country();
        this.fetchCountryData();
    }
    /**
     * @return {?}
     */
    NgxIntlTelInputComponent.prototype.ngOnChanges = function (changes) {
        // function that loads data to the emitter data from valueData
        for (let propName in changes) {
            let change = changes['valueData'];
            let curVal = (change.currentValue);
            let prevVal = (change.previousValue)
            if(typeof curVal === 'object' && [null,undefined,''].indexOf(curVal) === -1){
                if(curVal && curVal.phone && curVal.country)
                {
                    this.valueEmit.emit(curVal)
                }
            }

        }
    }

    /**
     * @return {?}
     */
    NgxIntlTelInputComponent.prototype.ngOnInit = function () {
        var _this = this;
        if (this.preferredCountries.length) {
            this.preferredCountries.forEach(function (iso2) {
                var /** @type {?} */ preferredCountry = _this.allCountries.filter(function (c) {
                    return c.iso2 === iso2;
                });
                _this.preferredCountriesInDropDown.push(preferredCountry[0]);
            });
        }
        if (this.preferredCountriesInDropDown.length) {
            this.selectedCountry = this.preferredCountriesInDropDown[0];
        }
        else {
            this.selectedCountry = this.allCountries[0];
        }
        this.valueEmit.subscribe((e) =>{
            if(e && e.phone && e.country){
                    this.phone_number = e.phone
                     var selectedCountryFind = _this.allCountries.filter(function (c) {
                        return c.iso2 === e.country.toString().toLowerCase()
                    })
                this.selectedCountry = selectedCountryFind[0]
            }
        },(err) =>{
            console.log('Error on data input',err);
            return e;
        }) // checks the input data from the emitter and read the appropriate values

    };
    /**
     * @return {?}
     */
    NgxIntlTelInputComponent.prototype.onPhoneNumberChange = function () {
        this.value = this.selectedCountry.dialCode + this.phone_number;
        this.valueChange.emit({
                country:this.selectedCountry.iso2,
                dialCode:this.selectedCountry.dialCode,
                phone:this.value,
                number:this.phone_number,
            }); // add new output data
    };
    /**
     * @param {?} country
     * @param {?} el
     * @return {?}
     */
    NgxIntlTelInputComponent.prototype.onCountrySelect = function (country, el) {
        this.selectedCountry = country;
        if (this.phone_number.length > 0) {
            this.value = this.selectedCountry.dialCode + this.phone_number;
            this.valueChange.emit({
                country:this.selectedCountry.iso2,
                dialCode:this.selectedCountry.dialCode,
                phone:this.value,
                number:this.phone_number,
            });  // add new output data
        }
        el.focus();
    };
    /**
     * @param {?} event
     * @return {?}
     */
    NgxIntlTelInputComponent.prototype.onInputKeyPress = function (event) {
        var /** @type {?} */ pattern = /[0-9\+\-\ ]/;
        var /** @type {?} */ inputChar = String.fromCharCode(event.charCode);
        if (!pattern.test(inputChar)) {
            event.preventDefault();
        }
    };
    /**
     * @return {?}
     */
    NgxIntlTelInputComponent.prototype.fetchCountryData = function () {
        var _this = this;
        this.countryCodeData.allCountries.forEach(function (c) {
            var /** @type {?} */ country = new Country();
            country.name = c[0].toString();
            country.iso2 = c[1].toString();
            country.dialCode = c[2].toString();
            country.priority = +c[3] || 0;
            country.areaCode = +c[4] || null;
            country.flagClass = country.iso2.toLocaleLowerCase();
            country.placeHolder = _this.getPhoneNumberPlaceHolder(country.iso2.toUpperCase());
            _this.allCountries.push(country);
        });
    };
    /**
     * @param {?} countryCode
     * @return {?}
     */
    NgxIntlTelInputComponent.prototype.getPhoneNumberPlaceHolder = function (countryCode) {
        var /** @type {?} */ phoneUtil = PhoneNumberUtil.getInstance();
        var /** @type {?} */ pnf = PhoneNumberFormat;
        try {
            var /** @type {?} */ phoneNumber = phoneUtil.parse('2236512366', countryCode);
            return phoneUtil.format(phoneNumber, pnf.INTERNATIONAL);
        }
        catch (e) {
            console.log('CountryCode: "' + countryCode + '" ' + e);
            return e;
        }
    };
    return NgxIntlTelInputComponent;
}());
NgxIntlTelInputComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-intl-tel-input',
                template: "<div class=\"intl-tel-input allow-dropdown\"> <div class=\"flag-container\" dropdown> <div class=\"selected-flag dropdown-toggle\" dropdownToggle> <div class=\"iti-flag\" [ngClass]=\"selectedCountry.flagClass\"></div> <div class=\"iti-arrow\"></div> </div> <ul class=\"country-list dropdown-menu\" *dropdownMenu> <li class=\"country\" *ngFor=\"let country of preferredCountriesInDropDown\" (click)=\"onCountrySelect(country, focusable)\"> <div class=\"flag-box\"> <div class=\"iti-flag\" [ngClass]=\"country.flagClass\"></div> </div> <span class=\"country-name\">{{country.name}}</span> <span class=\"dial-code\">+{{country.dialCode}}</span> </li> <li class=\"divider\"></li> <li class=\"country\" *ngFor=\"let country of allCountries\" (click)=\"onCountrySelect(country, focusable)\"> <div class=\"flag-box\"> <div class=\"iti-flag\" [ngClass]=\"country.flagClass\"></div> </div> <span class=\"country-name\">{{country.name}}</span> <span class=\"dial-code\">+{{country.dialCode}}</span> </li> </ul> </div> <input type=\"tel\" id=\"phone\" name=\"phone\" class=\"form-control\" autocomplete=\"off\" (keypress)=\"onInputKeyPress($event)\" [(ngModel)]=\"phone_number\" (ngModelChange)=\"onPhoneNumberChange()\" [placeholder]=\"selectedCountry.placeHolder\" #focusable> </div> ",
                styles: ["li.country:hover { background-color: rgba(0, 0, 0, 0.05); } "],
                providers: [CountryCode]
            },] },
]; // update  - add - name=\"phone\" allows validation of other plugins like jquery validate :)
/**
 * @nocollapse
 */
NgxIntlTelInputComponent.ctorParameters = function () { return [
    { type: CountryCode, },
]; };
NgxIntlTelInputComponent.propDecorators = {
    'valueData': [{ type: Input },],  // update value on valueData
    'preferredCountries': [{ type: Input },],
    'valueChange': [{ type: Output },],
};

var NgxIntlTelInputService = (function () {
    function NgxIntlTelInputService() {
    }
    return NgxIntlTelInputService;
}());
NgxIntlTelInputService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
NgxIntlTelInputService.ctorParameters = function () { return []; };

var NgxIntlTelInputModule = (function () {
    function NgxIntlTelInputModule() {
    }
    /**
     * @return {?}
     */
    NgxIntlTelInputModule.forRoot = function () {
        return {
            ngModule: NgxIntlTelInputModule,
            providers: [NgxIntlTelInputService]
        };
    };
    return NgxIntlTelInputModule;
}());
NgxIntlTelInputModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    FormsModule,
                    BsDropdownModule.forRoot()  // update add forRoot
                ],
                declarations: [
                    NgxIntlTelInputComponent
                ],
                exports: [
                    NgxIntlTelInputComponent
                ]
            },] },
];
/**
 * @nocollapse
 */
NgxIntlTelInputModule.ctorParameters = function () { return []; };

export { NgxIntlTelInputModule, NgxIntlTelInputComponent, NgxIntlTelInputService };

I think that these corrections will be useful to someone
certainly big improvements is that the input data does not have to start with the constructor only at any moment of the component's operation
and what is important, we have the ability to set the right country
also the output data give the possibility to look up the country, the entry and the sms telephon number with prefix and without
Regards MarMak :)