countries-flags-dial-iso2

This component is a drop-down that should contain all countries. Each drop-down item will show * Country flag * Country Name in English and country language * Dial number

Usage no npm install needed!

<script type="module">
  import countriesFlagsDialIso2 from 'https://cdn.skypack.dev/countries-flags-dial-iso2';
</script>

README

CountriesFlagsDialIso2

This component is a drop-down that should contain all countries.
Each drop-down item will show

  • Country flag
  • Country Name in English and country language
  • Dial number

Note: The flags css and flags image was taken from library vue-country-code which is designed for vue framework.
CountriesFlagsDialIso2 is generated mainly for Angular

How to use

  • run npm install countries-flags-dial-iso2 --save
  • Import the module CountriesFlagsDialIso2Module into the module where your component belong to

Component API

  • id: string id will be assigned to the input tag
  • formControlCustom: FormControl to be used in reactiveForm
    ex: [formControlCustom]=myForm.get('mobile-number'). only the entered input will be emitted to reactive form and you have to set the country dial manually by using (selectCountryEmitter)
  • defaultCountryByIso2: string the selected country by default using iso2 code.
    ex: [defaultCountryByIso2]='us' this will make default country is USA
  • selectCountryEmitter this will emit the selected country as object.
    ex : {name: "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)", iso2: "ae", dial: "971", mobileFormat: ""}