I am using intl-tel-input plugin in Angular. I've got the parent component with FormGroup containing phoneNumber and countryCode properties. I am passing down those properties as form controls to the child. The child component is using the intl-tel-input plugin, the code looks like that
ngAfterViewInit(): void {
this.iti = intlTelInput(this.input.input.nativeElement, {
utilsScript: '../../assets/js/phone-utils.js',
preferredCountries: this.preferredCountries
})
this.input.nativeElement.addEventListener('countrychange', () => {
// set a value in the parent
this.countryCodeControl.setValue(this.iti.getSelectedCountryData().dialCode)
})
}
I want the countrychange event to be triggered at the beginning so I can set the countryCode in the parent's form group to the first one on the list. The first country on my list is Germany and if I add this.iti.setCountry('de') after initialization, the event is not triggered because this country is already selected in dropdown. I'd have to do something like this
this.iti.setCountry('at') // change the initial country
this.iti.setCountry('de') // set the initial country once again
My question is, can I somehow trigger the countrychange event even if I'm trying to set the country that is already selected?