ngx-material-country-select

ngx-material-country-select is an Angular component that provides a customizable country selection dropdown. It leverages Angular Material's MatSelect component, and it is designed to be easily integrated into forms with reactive or template-driven approaches.

Features

• Standalone Angular component
• Customizable label for the dropdown
• Displays country flags, names, and dial codes
• Supports form control binding with NG_VALUE_ACCESSOR
• Lightweight and easy to integrate with existing Angular projects

Installation

First, install the package via npm:

npm install ngx-material-country-select

Usage

Import NgxCountrySelectComponent into your module:

import { NgxCountrySelectComponent } from 'ngx-material-country-select';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxCountrySelectComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example Usage in a Template-Driven Form

<form #form="ngForm">
  <ngx-country-select
    name="country"
    [(ngModel)]="selectedCountry"
    [label]="'Select your country'"
  ></ngx-country-select>
</form>

Example Usage in a Reactive Form

import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <ngx-country-select formControlName="country"></ngx-country-select>
    </form>
  `,
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      country: null,
    });
  }
}

Inputs

• label: string - The label displayed above the dropdown (default: 'Select Country').

Outputs

• The component emits form control value changes automatically when integrated with Angular forms.

License

This project is licensed under the MIT License - see the LICENSE file for details.