Simple Angular2 Select component (with dropdown) - http://plnkr.co/edit/7ErSkd?p=preview

app.component.ts

import { Component } from '@angular/core';
import { SelectComponent } from './select.component';

@Component({
  selector: 'my-app',
  template: `
  <h1>Select component demo</h1>
  <custom-select placeholder-text="Select a country" [items]="countries" (onItemSelected)="setCountrySelection($event, 1)"></custom-select>
  <h3 *ngIf="selectedCountry">You selected <strong>{{selectedCountry}}</strong></h3>
  `,
  directives: [SelectComponent]
})
export class AppComponent {
  selectedCountry: any;
  countries: array<string> = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania","Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre &amp; Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts &amp; Nevis","St Lucia","St Vincent","St. Lucia","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad &amp; Tobago","Tunisia","Turkey","Turkmenistan","Turks &amp; Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

    setCountrySelection(item, index) {
     this.selectedCountry = item;
  }
}

select.component.scss

// Credit:
// http://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html
// by Hugo Giraudel (http://hugogiraudel.com)
.select-wrapper {
  position: relative;
  width: 250px;
  box-sizing: border-box;
  margin: 0 auto;
  margin-bottom: 2rem;
  padding: 10px 15px;
  background: #fff;
  cursor: pointer;
  outline: none;
  &::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: grey transparent;
  }
  &.active:after {
    display: none;
  }
  .text {
    color: darken(#ebebeb, 35%);
    font-size: 16px;
    &.active {
      color: rgba(33,33,33,0.87);
    }
  }
  .dropdown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;

    max-height: 50vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: white;
    transition: all 0.3s ease-out;
    list-style: none;
    padding-left: 0;

    opacity: 0;
    pointer-events: none;
    margin-top: 1em;
    li span {
      display: block;
      text-decoration: none;
      color: rgba(33,33,33,0.87);
      padding: 10px;
      transition: margin-top .15s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .15s cubic-bezier(0.4, 0.0, 0.2, 1), top .15s cubic-bezier(0.4, 0.0, 0.2, 1);
      &.active {
        color: #03A9F4;
      }
      &:hover {
        background: rgb(238,238,238);
      }
    }
  }
  &.active .dropdown {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    opacity: 1;
    top: 100%;
    pointer-events: auto;
    margin-top: -40px;
  }
}

select.component.ts

import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'custom-select',
  template: `
  <div class="select-wrapper" (click)="toggleDropdownState($event)" [class.active]="isActive">
  <span class="text" [class.active]="selectedItem">{{selectedItem || placeholderText}}</span>
	<ul class="dropdown">
    <li *ngFor="let item of items" (click)="notifyItemSelection(item)">
      <span [class.active]="item === selectedItem">
        {{item}}
        <!-- Use {{item.propertyToBeShown}} 
        if your array is an array of objects -->
      </span>
    </li>
	</ul>
</div>
`,
  styleUrls: ['select.component.css']
})
export class SelectComponent {
  @Input('placeholder-text')
  placeholderText: string = 'Choose an option';
  @Input()
  items: any[] = [];
  @Output()
  onItemSelected: EventEmitter<any> = new EventEmitter();

  isActive = false;
  selectedItem: any;

  toggleDropdownState(event) {
    this.isActive = !this.isActive;
    event.stopPropagation();
  }

  notifyItemSelection(item) {
    this.selectedItem = item;
    this.onItemSelected.emit(item);
  }

  /**
  Closes the dropdown when the user clicks something
  other than the dropdown
  */
  @HostListener('document:click')
  closeDropdown() {
    this.isActive = false;
  }
}