Handy Lists is a sleek and easy-to-use Angular component that allows you to display a searchable dropdown of countries with their flags. This component is perfect for apps that require country selection, offering a user-friendly way to browse and select a country.
Install the package using npm:
npm i @ng-raccolta/handy-lists
Simply add the <handy-lists></handy-lists>
component to your Angular template where you want the dropdown to appear.
<handy-lists></handy-lists>
You can use the getCountryDetails()
event to retrieve detailed information about the selected country, including the country name, dial code, flag, and country code.
Here's how to use it:
<handy-lists (getCountryDetails)="onCountrySelect($event)"></handy-lists>
In your component:
onCountrySelect(countryDetails: any) {
console.log('Selected Country:', countryDetails);
// countryDetails = {
// name: 'Country Name',
// dial_code: '+123',
// flag: '🇨🇦',
// country_code: 'CA'
// }
}
- Searchable Dropdown: Easily find the country you're looking for with a built-in search feature.
- Flags Included: Each country in the dropdown is displayed with its flag, making it easy to identify.
- Event-Driven: Retrieve the selected country's details with a simple event.
Feel free to contribute to Handy Lists by opening issues or submitting pull requests on the GitHub repository.
MIT License
Enjoy using Handy Lists to enhance your Angular applications! 🌍✨