country-code-picker

A library for Country code picker field

Live example

Getting started

Step 1: Install angular material:

NPM

ng add @angular/material

Step 2: Install country-code-picker:

NPM

npm install country-code-picker

Step 3: Import the CountryCodePickerComponent

popup.component.ts

import { CountryCodePickerComponent } from "country-code-picker";

@Component({
  selector: "app-popup",
  standalone: true,
  imports: [RouterOutlet, CountryCodePickerComponent],
  templateUrl: "./popup.component.html",
  styleUrl: "./popup.component.scss",
})
export class AppComponent {
  actionSelectEvent(event: Event) {
    console.log(event);
  }
}

Step 4: implement in html

popup.component.html

<country-code-picker displayValue="dial_code" defaultValue="+91" placeHolder="search" backgroundColor="#ffffff" borderColor="#000000" (actionSelectEvent)="actionSelectEvent($event)"></country-code-picker>

Step 5: download and add flags folder in your assets that you can find in my repo

• download the zip and extract open and get flags folder add it in your assets folder

Step 6: still flag image is not showing please restart the server

API

Inputs

Input	Type	Default	Allowed Values	Required	Description
displayValue	string	dial_code	dial_code/code/flag	no	display value that display in select field
defaultValue	string	+91	+91/IN	no	default value to be selected
placeHolder	string	dial_code	any text	no	placeholder to display in search input
backgroundColor	string	#ffffff	hex codes	no	color to add in background to selection field
borderColor	string	#000000	hex codes	no	color to add in border to selection field

Outputs

Output	Description
actionSelectEvent	event will called when an country code is selected

Changelogs