@ng-raccolta/handy-lists

Handy Lists: Angular Country Dropdown

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.

Installation

Install the package using npm:

npm i @ng-raccolta/handy-lists

Usage

Simply add the <handy-lists></handy-lists> component to your Angular template where you want the dropdown to appear.

<handy-lists></handy-lists>

Fetching Country Details

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'
  // }
}

Features

• 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.

Contributing

Feel free to contribute to Handy Lists by opening issues or submitting pull requests on the GitHub repository.

License

MIT License

Enjoy using Handy Lists to enhance your Angular applications! 🌍✨