I have successfully downloaded and set up the "ion-intl-tel-input" plugin from https://github.com/azzamasghar1/ion-intl-tel-input, and it is functioning properly. However, I am facing an issue with changing the default country select box placeholder from "Country" to a blank flag as the placeholder. I have been trying to resolve this for about a week but have not made any progress.
(Please Note): I do not want the default "[defaultCountryiso]" or the first "[selectFirstCountry]" country to be automatically selected. I want the user to have the option to manually select the country.
Below is the code for reference:
mobile.page.html
<ion-intl-tel-input class="lastnamefilter-new color"
required
id="countrycode"
name="countrycode"
[(ngModel)]="countrycode"
#phoneControl="ngModel"
(ionChange)="showCountryName($event)"
[defaultCountryiso]="defaultCountryIsoTest"
[dialCodePrefix]= "dialCodePrefix"
[enableAutoCountrySelect]="enableAutoCountrySelect"
[enablePlaceholder]="enablePlaceholder"
[fallbackPlaceholder]="fallbackPlaceholder"
[inputPlaceholder]="inputPlaceholder"
[minLength]= "minLength"
[modalTitle]="modalTitle"
[modalCssClass]="modalCssClass"
[modalSearchPlaceholder]="modalSearchPlaceholder"
[modalCloseText]="modalCloseText"
[modalCloseButtonSlot]= "modalCloseButtonSlot"
[modalCanSearch]="modalCanSearch"
[modalShouldBackdropClose]="modalShouldBackdropClose"
[modalShouldFocusSearchbar]="modalShouldFocusSearchbar"
[modalSearchFailText]="modalSearchFailText"
[onlyCountries]= "onlyCountries"
[preferredCountries]="preferredCountries"
[selectFirstCountry]="selectFirstCountry"
[separateDialCode]="separateDialCode"
>
mobile.page.ts
import { IonIntlTelInputModule } from 'ion-intl-tel-input';
@Component({
selector: 'app-mobile',
templateUrl: './mobile.page.html',
styleUrls: ['./mobile.page.scss'],
})
export class MobilePage implements OnInit {
countrycode = {
isoCode: '',
dialCode: '',
internationalNumber: '',
nationalNumber: ''
};
country_code: any;
defaultCountryIsoTest = '';
dialCodePrefix = '+';
enableAutoCountrySelect = true;
enablePlaceholder = true;
fallbackPlaceholder = '';
inputPlaceholder = 'Enter Mobile Number';
minLength = '8';
modalTitle = 'Select Country';
modalCssClass = '';
modalSearchPlaceholder = 'Enter country name';
modalCloseText = 'Close';
modalCloseButtonSlot = 'end';
modalCanSearch = true;
modalShouldBackdropClose = true;
modalShouldFocusSearchbar = true;
modalSearchFailText = 'No countries found.';
onlyCountries = [];
preferredCountries = ['in', 'sg'];
selectFirstCountry = false;
separateDialCode = false;
disableTest = false;
constructor(private ionIntlTelInputModule:IonIntlTelInputModule ) {}
showCountryName(obj) {
console.log(this.countrycode, obj);
}
}
Here is a screenshot of the current state:
https://i.sstatic.net/9zQ3w.png
Below is the desired outcome:
https://i.sstatic.net/4mcMS.png
Thank you in advance!