• Stars
    star
    118
  • Rank 299,923 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 5 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Angular Material component that allow users to select a country or nationality with an autocomplete feature

angular-material-extensions's logo

@angular-material-extensions/select-country - Angular Material component that allow users to select a country or nationality with an autocomplete feature

npm version npm demo docs: typedoc Join the chat at https://gitter.im/angular-material-extensions/Lobby Build Status codecov Greenkeeper Badge license

@angular-material-extensions/select-country demonstration

@angular-material-extensions/select-country demonstration

Built by and for developers ❀️

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If you like this project, support angular-material-extensions by starring ⭐ and sharing it πŸ“’

Table of Contents

Demo

View all the directives and components in action at https://angular-material-extensions.github.io/select-country

Library's components

  • <mat-select-country> used to display the main component

Dependencies

  • Angular developed and tested with 14.x

Installation

1. Install via ng add. (Recommended)

If Angular Material Design is not setup, just run ng add @angular/material learn more

Now add the library via the angular schematics

ng add @angular-material-extensions/select-country

2. Install via npm. (Alternative)

Install peer dependencies

npm i svg-country-flags -s

then update your angular.json like below (svg-country-flags)

"assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/svg-country-flags/svg",
                "output": "src/assets/svg-country-flags/svg"
              }
            ],

Now install @angular-material-extensions/select-country via:

npm install --save @angular-material-extensions/select-country

Import the library

If you installed the library via angular schematics, you can skip this step

Once installed you need to import the main module and the HttpClientModule:

import { MatSelectCountryModule } from "@angular-material-extensions/select-country";
import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [
              MatSelectCountryModule.forRoot('de'), // you can use 'br' | 'de' | 'en' | 'es' | 'fr' | 'hr' | 'hu' | 'it' | 'nl' | 'pt' --> MatSelectCountrySupportedLanguages
             HttpClientModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

in other modules

import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [MatSelectCountryModule, HttpClientModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application like for lazy loading import MatSelectCountryModule into your feature module:

API

<mat-select-country> used to display the main component - see the demo examples

option bind type default description
value Input() Country - the selected country (pass an empty Country object with alpha2 code populated to do alpha2 lookup)
appearance Input() MatFormFieldAppearance - Possible appearance styles for mat-form-field ('legacy', 'standard', 'fill' or 'outline')
countries Input() Country[] All countries stored in the lib Countries that should be loaded - predefine the countries that you only need!
label Input() boolean - mat-form-field label's text
itemsLoadSize Input() number - the number of countries that should be fetched --> improves the performance
placeHolder Input() boolean - input placeholder text
disabled Input() boolean - Whether the component is disabled
loading Input() boolean - Whether the component is loading
nullable Input() boolean - Whether the component is able to emit null
readonly Input() boolean - Whether the component is read only
tabIndex Input() number | string - Whether the component can be focused, and where it participates in sequential keyboard navigation
showCallingCode Input() boolean false Whether the component to show the country's calling code in the label and selection
class Input() string - Class attribute apply style to input text or validation ignore (optional)
language Input() string - the language, if not specified MatSelectCountryModule.forRoot('XX') will be used (optional)
name Input() string 'country' the attribute name of the input element
autocomplete Input() string - the attribute autocomplete of the input element, to avoid suggestion of some browsers put 'no'
onCountrySelected Output() EventEmitter<Country> - emits the selected country as object (see the interface below)
interface Country {
  name: string;
  alpha2Code: string;
  alpha3Code: string;
  numericCode: string;
  callingCode: string;
}

Usage

add the <mat-select-country> element to your template:

<mat-select-country>
</mat-select-country>

@angular-material-extensions/select-country demonstration

@angular-material-extensions/select-country demonstration

@angular-material-extensions/select-country demonstration

Use the library with reactive forms

option 1 with Reactive Forms

<mat-select-country appearance="outline"
                    label="Country"
                    [formControl]="countryFormControl"
                    (onCountrySelected)="onCountrySelected($event)">
</mat-select-country>

option 2 with Reactive Forms

<form [formGroup]="countryFormGroup">
    <div fxLayoutAlign="center">
      <mat-select-country appearance="outline"
                          label="Country"
                          class="className"
                          formControlName="country"
                          (onCountrySelected)="onCountrySelected($event)">
      </mat-select-country>
    </div>
  </form>
import {Component,OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';

import {Country} from '@angular-material-extensions/select-country';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'select-country';

  countryFormControl = new FormControl();
  countryFormGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    angulartics2GoogleAnalytics.startTracking();
  }

  ngOnInit(): void {

    this.countryFormGroup = this.formBuilder.group({
      country: []
    });

    this.countryFormGroup.get('country').valueChanges
.subscribe(country => console
.log('this.countryFormGroup.get("country").valueChanges', country));

    this.countryFormControl.valueChanges
.subscribe(country => console
.log('this.countryFormControl.valueChanges', country));
  }


  onCountrySelected($event: Country) {
    console.log($event);
  }
}

Predefine your countries to load

<mat-select-country appearance="outline"
                    label="Country"
                    [countries]="predefinedCountries"
                    (onCountrySelected)="onCountrySelected($event)">
</mat-select-country>
import {Country} from '@angular-material-extensions/select-country';

predefinedCountries: Country[] = [
  {
    name: 'Germany',
    alpha2Code: 'DE',
    alpha3Code: 'DEU',
    numericCode: '276',
    callingCode: '+49'
  },
  {
    name: 'Greece',
    alpha2Code: 'GR',
    alpha3Code: 'GRC',
    numericCode: '300',
    callingCode: '+30'
  },
  {
    name: 'France',
    alpha2Code: 'FR',
    alpha3Code: 'FRA',
    numericCode: '250',
    callingCode: '+33'
  },
  {
    name: 'Belgium',
    alpha2Code: 'BE',
    alpha3Code: 'BEL',
    numericCode: '056',
    callingCode: '+32'
  }
];

Result:

@angular-material-extensions/select-country demonstration

Improve performance - use the itemsLoadSize property

<mat-select-country appearance="outline"
                    label="Country"
                    [itemsLoadSize]="5">
</mat-select-country>

only 5 countries will fetched!

Change language dynamically - use the language property

<mat-select-country appearance="outline"
                    label="Country"
                    [language]="languageSelected"
                    (onCountrySelected)="onCountrySelected($event)">
</mat-select-country>

Run Demo App Locally

Build the library

$ npm run build:lib

Serve the demo app

$ npm start

Other Angular Libraries


Who is using this library?

nahaus.de - Digital and Automated Real Estate Management

To put your project here, please drop an appropriate PR


Support

Built by and for developers ❀️ we will help you πŸ‘Š


jetbrains logo

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm


License

Copyright (c) 2020-2022 Anthony Nahas. Licensed under the MIT License (MIT)

angular-material-extensions's logo

More Repositories

1

password-strength

Angular UI library to illustrate and validate a password's strength with material design
TypeScript
276
star
2

google-maps-autocomplete

Autocomplete input component and directive for google-maps built with angular and material design |
TypeScript
165
star
3

link-preview

Angular open source UI library to preview web links
JavaScript
56
star
4

pages

Open source library for angular apps to illustrate custom material pages content with steps (ideal for tutorials and explanations purposes)
CSS
50
star
5

fab-menu

Angular Component that represents a menu of buttons triggered by a floating action button | built with material design
TypeScript
48
star
6

freelancer-theme

Open Source Angular Material Theme as SPA for freelancers based on Start Bootstrap Theme
TypeScript
48
star
7

contacts

Angular Library to manage contacts and users with a material design
JavaScript
44
star
8

faq

Angular Library built with material design in order to provide a reusable faq (frequently asked questions) component for every project. Ask, Answer and List
JavaScript
29
star
9

calendar

Angular responsive calendar built with material design for desktop and mobile
TypeScript
21
star
10

jumbotron

Angular UI open source library built with material design in order to illustrate a highlighted/important information for the user
JavaScript
7
star
11

core

Set of components, directives and services to boost the app development with angular material 2
TypeScript
7
star
12

select-icon

Angular component that allows to select an option in form of a material design icon button
TypeScript
6
star
13

components

Set of components, directives, services and modules to boost the app development with angular material
CSS
5
star
14

layout

Set of angular directives that allow developers to boost and easy enhance their app development's layout
JavaScript
5
star
15

input-counter

Modern number input component built with angular and material design
HTML
3
star
16

algolia

Angular Material Components for Algolia Instant Search | Search, Autocomplete, Query, Filter
TypeScript
1
star
17

loaders

Set of angular loading components - simple and easy to use
HTML
1
star