Alessandro Celeghin
Reputation: 4199
Angular 2 Dropdown with flags and countrycode
my app is internationalized with ng2 translate,and in my login page I want something like a dropdown menù where every option have country flag and country name, is there something to install that resolve this quickly? Or maybe any example that help me to do on my own
Upvotes: 2
Views: 25345
Answers (3)
Antonio Franceskin
Reputation: 1
I use a reactive form and https://www.npmjs.com/package/flag-icon-css. When I select the country code it will show the flag of that country and when valid the mobile places the borders of the flag, the country code and the mobile number in green or red depending on the validation. Work fine!!!! Check the attached image
**my components**
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CountryCode } from '../../model/countrycode.model';
import * as dataCountry from '../../countrycode.json';
@Component({
selector: 'app-prueba1',
templateUrl: './prueba1.component.html',
styleUrls: ['./prueba1.component.css']
})
export class Prueba1Component implements OnInit {
public form: FormGroup;
public loencontro: boolean = false;
public listCountry: CountryCode[] = [];
public pais: string = 'es';
constructor(
public fb: FormBuilder) {
this.listCountry = (dataCountry as any).default;
this.form = this.fb.group({
countrycode: ['+34', [Validators.required]],
movil: ['', [Validators.required, Validators.pattern('^[0-9]*$')]]
}, {
validator: this.MustExist('countrycode')
});
}
MustExist(countrycode: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[countrycode];
if (control.errors) {
return;
}
this.loencontro = false;
this.listCountry.forEach(item => {
if (control.value === item.dialcode) {
this.loencontro = true;
this.pais = item.code.toLowerCase();
console.log('Dentro del foreach ' + control.value );
}});
if (!this.loencontro) {
control.setErrors({'incorrect': true});
} else {
control.setErrors(null);
}
};
}
ngOnInit(): void {
}
guardar() {
console.log(this.form);
}
}
**my html**
<form [formGroup]="form" (submit)="guardar()">
<div class="row">
<div class="col-4">
<div class="form-group">
<label for="inputmovil2">{{ "envio.html13" | translate }}(*)</label>
<div class="input-group">
<div class="input-group-addon" [ngClass]="{
'green-border': this.form.get('movil').valid && this.form.get('movil').touched,
'red-border': this.form.get('movil').invalid && this.form.get('movil').touched
}">
<span class="flag-icon flag-icon-squared" [ngClass]="{
'flag-icon-es': pais == 'es',
'flag-icon-mx': pais == 'mx',
'flag-icon-af': pais == 'af',
'flag-icon-al': pais == 'al',
'flag-icon-de': pais == 'de',
'flag-icon-ad': pais == 'ad',
'flag-icon-ao': pais == 'ao',
'flag-icon-ag': pais == 'ag',
'flag-icon-sa': pais == 'sa',
'flag-icon-dz': pais == 'dz',
'flag-icon-ar': pais == 'ar',
'flag-icon-am': pais == 'am',
'flag-icon-au': pais == 'au',
'flag-icon-at': pais == 'at',
'flag-icon-az': pais == 'az',
'flag-icon-bs': pais == 'bs',
'flag-icon-bd': pais == 'bd',
'flag-icon-bb': pais == 'bb',
'flag-icon-bh': pais == 'bh',
'flag-icon-be': pais == 'be',
'flag-icon-bz': pais == 'bz',
'flag-icon-bj': pais == 'bj',
'flag-icon-by': pais == 'by',
'flag-icon-bo': pais == 'bo',
'flag-icon-ba': pais == 'ba',
'flag-icon-bw': pais == 'bw',
'flag-icon-br': pais == 'br',
'flag-icon-bn': pais == 'bn',
'flag-icon-bg': pais == 'bg',
'flag-icon-bf': pais == 'bf',
'flag-icon-bi': pais == 'bi',
'flag-icon-bt': pais == 'bt',
'flag-icon-cv': pais == 'cv',
'flag-icon-kh': pais == 'kh',
'flag-icon-cm': pais == 'cm',
'flag-icon-ca': pais == 'ca',
'flag-icon-qa': pais == 'qa',
'flag-icon-td': pais == 'td',
'flag-icon-cl': pais == 'cl',
'flag-icon-cn': pais == 'cn',
'flag-icon-cy': pais == 'cy',
'flag-icon-co': pais == 'co',
'flag-icon-km': pais == 'km',
'flag-icon-kp': pais == 'kp',
'flag-icon-kr': pais == 'kr',
'flag-icon-ci': pais == 'ci',
'flag-icon-cr': pais == 'cr',
'flag-icon-hr': pais == 'hr',
'flag-icon-cu': pais == 'cu',
'flag-icon-dk': pais == 'dk',
'flag-icon-dm': pais == 'dm',
'flag-icon-ec': pais == 'ec',
'flag-icon-eg': pais == 'eg',
'flag-icon-sv': pais == 'sv',
'flag-icon-ae': pais == 'ae',
'flag-icon-er': pais == 'er',
'flag-icon-sk': pais == 'sk',
'flag-icon-si': pais == 'si',
'flag-icon-us': pais == 'us',
'flag-icon-ee': pais == 'ee',
'flag-icon-et': pais == 'et',
'flag-icon-ph': pais == 'ph',
'flag-icon-fi': pais == 'fi',
'flag-icon-fj': pais == 'fj',
'flag-icon-fr': pais == 'fr',
'flag-icon-ga': pais == 'ga',
'flag-icon-gm': pais == 'gm',
'flag-icon-ge': pais == 'ge',
'flag-icon-gh': pais == 'gh',
'flag-icon-gd': pais == 'gd',
'flag-icon-gr': pais == 'gr',
'flag-icon-gt': pais == 'gt',
'flag-icon-gn': pais == 'gn',
'flag-icon-gw': pais == 'gw',
'flag-icon-gq': pais == 'gq',
'flag-icon-gy': pais == 'gy',
'flag-icon-ht': pais == 'ht',
'flag-icon-hn': pais == 'hn',
'flag-icon-hu': pais == 'hu',
'flag-icon-in': pais == 'in',
'flag-icon-id': pais == 'id',
'flag-icon-iq': pais == 'iq',
'flag-icon-ir': pais == 'ir',
'flag-icon-ie': pais == 'ie',
'flag-icon-is': pais == 'is',
'flag-icon-mh': pais == 'mh',
'flag-icon-sb': pais == 'sb',
'flag-icon-il': pais == 'il',
'flag-icon-it': pais == 'it',
'flag-icon-jm': pais == 'jm',
'flag-icon-jp': pais == 'jp',
'flag-icon-jo': pais == 'jo',
'flag-icon-kz': pais == 'kz',
'flag-icon-ke': pais == 'ke',
'flag-icon-kg': pais == 'kg',
'flag-icon-ki': pais == 'ki',
'flag-icon-kw': pais == 'kw',
'flag-icon-la': pais == 'la',
'flag-icon-ls': pais == 'ls',
'flag-icon-lv': pais == 'lv',
'flag-icon-lb': pais == 'lb',
'flag-icon-lr': pais == 'lr',
'flag-icon-ly': pais == 'ly',
'flag-icon-li': pais == 'li',
'flag-icon-lt': pais == 'lt',
'flag-icon-lu': pais == 'lu',
'flag-icon-mk': pais == 'mk',
'flag-icon-mg': pais == 'mg',
'flag-icon-my': pais == 'my',
'flag-icon-mw': pais == 'mw',
'flag-icon-mv': pais == 'mv',
'flag-icon-ml': pais == 'ml',
'flag-icon-mt': pais == 'mt',
'flag-icon-ma': pais == 'ma',
'flag-icon-mu': pais == 'mu',
'flag-icon-mr': pais == 'mr',
'flag-icon-fm': pais == 'fm',
'flag-icon-md': pais == 'md',
'flag-icon-mc': pais == 'mc',
'flag-icon-mn': pais == 'mn',
'flag-icon-me': pais == 'me',
'flag-icon-mz': pais == 'mz',
'flag-icon-mm': pais == 'mm',
'flag-icon-na': pais == 'na',
'flag-icon-nr': pais == 'nr',
'flag-icon-np': pais == 'np',
'flag-icon-ni': pais == 'ni',
'flag-icon-ne': pais == 'ne',
'flag-icon-ng': pais == 'ng',
'flag-icon-no': pais == 'no',
'flag-icon-nz': pais == 'nz',
'flag-icon-om': pais == 'om',
'flag-icon-nl': pais == 'nl',
'flag-icon-pk': pais == 'pk',
'flag-icon-pw': pais == 'pw',
'flag-icon-pa': pais == 'pa',
'flag-icon-pg': pais == 'pg',
'flag-icon-py': pais == 'py',
'flag-icon-pe': pais == 'pe',
'flag-icon-pl': pais == 'pl',
'flag-icon-pt': pais == 'pt',
'flag-icon-gb': pais == 'gb',
'flag-icon-cf': pais == 'cf',
'flag-icon-cz': pais == 'cz',
'flag-icon-cg': pais == 'cg',
'flag-icon-cd': pais == 'cd',
'flag-icon-do': pais == 'do',
'flag-icon-rw': pais == 'rw',
'flag-icon-ro': pais == 'ro',
'flag-icon-ru': pais == 'ru',
'flag-icon-ws': pais == 'ws',
'flag-icon-kn': pais == 'kn',
'flag-icon-sm': pais == 'sm',
'flag-icon-vc': pais == 'vc',
'flag-icon-lc': pais == 'lc',
'flag-icon-st': pais == 'st',
'flag-icon-sn': pais == 'sn',
'flag-icon-rs': pais == 'rs',
'flag-icon-sc': pais == 'sc',
'flag-icon-sl': pais == 'sl',
'flag-icon-sg': pais == 'sg',
'flag-icon-sy': pais == 'sy',
'flag-icon-so': pais == 'so',
'flag-icon-lk': pais == 'lk',
'flag-icon-sz': pais == 'sz',
'flag-icon-za': pais == 'za',
'flag-icon-sd': pais == 'sd',
'flag-icon-ss': pais == 'ss',
'flag-icon-se': pais == 'se',
'flag-icon-ch': pais == 'ch',
'flag-icon-sr': pais == 'sr',
'flag-icon-th': pais == 'th',
'flag-icon-tz': pais == 'tz',
'flag-icon-tj': pais == 'tj',
'flag-icon-tl': pais == 'tl',
'flag-icon-tg': pais == 'tg',
'flag-icon-to': pais == 'to',
'flag-icon-tt': pais == 'tt',
'flag-icon-tn': pais == 'tn',
'flag-icon-tm': pais == 'tm',
'flag-icon-tr': pais == 'tr',
'flag-icon-tv': pais == 'tv',
'flag-icon-ua': pais == 'ua',
'flag-icon-ug': pais == 'ug',
'flag-icon-uy': pais == 'uy',
'flag-icon-uz': pais == 'uz',
'flag-icon-vu': pais == 'vu',
'flag-icon-ve': pais == 've',
'flag-icon-vn': pais == 'vn',
'flag-icon-ye': pais == 'ye',
'flag-icon-dj': pais == 'dj',
'flag-icon-zm': pais == 'zm',
'flag-icon-zw': pais == 'zw',
'green-border': this.form.get('movil').valid && this.form.get('movil').touched,
'red-border': this.form.get('movil').invalid && this.form.get('movil').touched
}"></span>
</div>
<input type="text" class="form-control col-3" id="inputmovil1" placeholder="+###"
formControlName="countrycode" />
<input type="text" class="form-control col-7" id="inputmovil2"
placeholder="{{ 'envio.html13' | translate }}" formControlName="movil" />
</div>
</div>
</div>
</div>
</form>
**json file**
[{
"name": "Afghanistan",
"dialcode": "+93",
"code": "AF"
}, {
"name": "Åland Islands",
"dialcode": "+358",
"code": "AX"
}, {
"name": "Albania",
"dialcode": "+355",
"code": "AL"
}, {
"name": "Algeria",
"dialcode": "+213",
"code": "DZ"
},.........]
Upvotes: 0
progm
Reputation: 2858
I needed similar functionality.
For this, I created the ngx-flag-picker library.
How to use
Add a link tag with flag-icon-css library to your index.html file.
Add NgxFlagPickerModule to your module in the import section.
After:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <ngx-flag-picker [selectedCountryCode]="selectedCountryCode" [countryCodes]="countryCodes" (changedCountryCode)="changeSelectedCountryCode($event)"> </ngx-flag-picker> <h1>{{ selectedCountryCode }}</h1> ` }) export class AppComponent { selectedCountryCode = 'us'; countryCodes = ['us', 'lu', 'de', 'bs', 'br', 'pt']; changeSelectedCountryCode(value: string): void { this.selectedCountryCode = value; } }
Links:
Upvotes: 3
Amol Bhor
Reputation: 2522
You can use CountrySelect for country drop-down with flags, country-isoCode and phoneCode values.
you can go through this link: https://github.com/mrmarkfrench/country-select-js
To use this, you need to add countrySelect.js and countrySelect.css to use this in your Angular application and apply to Input control using jQuery("#nationality").countrySelect();
Below is the code which i had used in my application.
journey-details.html
<form class="form-horizontal" (submit)="saveApplication(applicationform.value)" #applicationform="ngForm" *ngIf="application" novalidate>
<div class="form-group">
<div class="col-sm-3 col-md-3 hidden-xs">
<i class="fa fa-globe" aria-hidden="true"></i>
<label class="frmlable required-field bgorange">Nationality (As in passport)</label>
</div>
<div class="col-sm-9 col-md-4">
<input class="form-control nationality-country enjoy-css" type="text" id="nationality">
</div>
</div>
</form>
journey-details.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AjaxLoader } from '../shared/services/ajax-loader';
import { Country } from '../shared/models/country';
declare var jQuery: any;
@Component({
moduleId: module.id,
selector: 'visa-journey-details',
templateUrl: 'journey-details.html',
providers: [CommonService, AjaxLoader, AuthCookie]
})
export class JourneyDetailsComponent {
public nationalities: Country;
public countryIsoCode: string = '';
constructor(
private router: Router,
private ajaxLoader: AjaxLoader) {
this.ajaxLoader.startLoading();
this.getDropDownList();
}
ngAfterViewInit() {
jQuery("#nationality").countrySelect();
jQuery("#nationality").on('change', () => {
this.onChange();
});
}
onChange(): void {
if (jQuery("#nationality").countrySelect("getSelectedCountryData")) {
this.countryIsoCode = jQuery("#nationality").countrySelect("getSelectedCountryData").iso2;
} else {
this.countryIsoCode = '';
}
}
}
project.config.ts
import { join } from 'path';
import { SeedConfig } from './seed.config';
/**
* This class extends the basic seed configuration, allowing for project specific overrides. A few examples can be found
* below.
*/
export class ProjectConfig extends SeedConfig {
PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');
constructor() {
super();
// this.APP_TITLE = 'Put name of your app here';
/* Enable typeless compiler runs (faster) between typed compiler runs. */
// this.TYPED_COMPILE_INTERVAL = 5;
// Add `NPM` third-party libraries to be injected/bundled.
this.NPM_DEPENDENCIES = [
...this.NPM_DEPENDENCIES,
// {src: 'jquery/dist/jquery.min.js', inject: 'libs'},
// {src: 'lodash/lodash.min.js', inject: 'libs'},
{ src: '../../src/client/js/index.js', inject: 'libs' },
{ src: '../../src/client/js/Intl.min.js', inject: 'libs' },
{ src: '../../node_modules/intl/locale-data/jsonp/en.js', inject: 'libs' },
{ src: '../../src/client/js/es6-shim.min.js', inject: 'libs' },
{ src: '../../src/client/js/jquery-1.11.1.min.js', inject: 'libs'},
{ src: '../../src/client/js/moment.min.js', inject: 'libs'},
{ src: '../../src/client/js/plugins.js', inject: 'libs'},
{ src: '../../src/client/js/daterangepicker.js', inject: 'libs' },
{ src: '../../src/client/js/custom.min.js', inject: 'libs'},
{ src: '../../src/client/js/common-script.js', inject: 'libs' },
{ src: '../../src/client/js/QuickAccord.js', inject: 'libs' },
{ src: '../../src/client/js/paperfold.js', inject: 'libs' },
{ src: '../../src/client/css/daterangepicker.css', inject: true },
{ src: '../../src/client/css/style.min.css', inject: true },
];
// Add `local` third-party libraries to be injected/bundled.
this.APP_ASSETS = [
...this.APP_ASSETS,
];
/* Add to or override NPM module configurations: */
// this.mergeObject(this.PLUGIN_CONFIGS['browser-sync'], { ghostMode: false });
}
}
Hope this will help you.
another reference for the same : http://www.jqueryscript.net/form/jQuery-Plugin-For-Country-Selecter-with-Flags-flagstrap.html
Upvotes: 1
Related Questions
- showing only country code in material-select angular
- How to create Cascading Drop Down (Country and State list) In Angular 6
- How to do Dropdown list Integration for countries and cities in Angular 5?
- Country and State dropdowns in angular 2
- 3 cascading dropdown for country, state and city in angular4
- How to show country flag as dropdown in angaularjs and to use it as localization?
- Angular State Dropdown Bound to Country Select
- Country select control for angularJs
- Angular JS. Show country flags in UI while I have only ID of country
- How can I add internationalization to a select drop down with AngularJS?