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

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