Angular 2 Dropdown with flags and countrycode

Question

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

Solution 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

Solution 2

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:

• Npm

• Github

• Demo

Comments

[Dmitrij Kuba]

You 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 github.com/bulktrade/SMSBOX/blob/master/modules/client/src/a‌​pp/…