I have successfully installed and configured the plugin - "ion-intl-tel-input" from <https://github.com/azzamasghar1/ion-intl-tel-input> which is working fine. But I need to reset the default country's select box placeholder from "Country" to blank flag as placeholder in that. I have spent around 1 week for this, but nothing fruitful.
(Note) : I don't want to achieve default "[defaultCountryiso]" or first "[selectFirstCountry]" country selection at first time. It should be a manual selection option opened for user.
Here is my code for the 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"
>
</ion-intl-tel-input>
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);
}
}
Screenshot of what I'm getting :
What I'm expecting to achieve :
Thanks in advance..!
After a guidance from my senior dev got the solution simply with CSS.
Here it is:
ion-intl-tel-input {
::ng-deep .ionic-selectable-has-placeholder div.ionic-selectable-value-item
{
content: "";
display: inline-block;
width: 23px;
background-color: var(--placeholder-color, #999);
height: 18px;
font-size: 0px;
}
}