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
Asked
Active
Viewed 2.3k times
2
-
1You can take a look at my own component which i've implemented a long time ago. May be it will help you. Make sure that you included `flag-icon-css` https://github.com/bulktrade/SMSBOX/blob/master/modules/client/src/app/common/component/language-selector/language-selector.component.ts – Dmitrij Kuba Apr 19 '17 at 15:02
3 Answers
3
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:
progm
- 2,782
- 3
- 14
- 32
1
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
Amol Bhor
- 2,322
- 1
- 12
- 14
-
Hi I follow the demo example and your code but I don't understand where jquery comes from, I have this error: ` ERROR Error: Uncaught (in promise): ReferenceError: jQuery is not defined` – Alessandro Celeghin Apr 20 '17 at 08:26
-
@Alessandro You needs to add jquery.js in your ProjectConfig class of config.ts as NPM_DEPENDENCIES. i have updated my answer. plz go through – Amol Bhor Apr 20 '17 at 09:20
-
Sorry I don't have any config.js file, my dependencies is in package.json where I have ` "jquery": "^3.2.1"` – Alessandro Celeghin Apr 20 '17 at 09:46
-
@Alessandro package.json contains all your dependencies and plugin which u have added in ur project. so search for "project.config.ts" in your project (mostly in contains in tools folder) and then add jquery reference there or u can use regular – Amol Bhor Apr 20 '17 at 11:18
0
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"
},.........]
