Simple multi select dropdown component for Angular 2.

app.component.ts

import {Component} from 'angular2/core';
import {MutliSelectDropdownComponent, DropdownItem, DropdownSelectionItem} from './multiselect.component';

/*
 * Example usage of a simple multi select dropdown for angular 2.
 * See component for more information.
 */
@Component({
    selector: 'my-app',
    directives: [MutliSelectDropdownComponent],
    template: `
       <h1 (click)="onClick()">Multi select dropdown example (click to add items)</h1>
       <multi-select-dropdown (selectionModelChange)="onUpdate($event)" [items]="dropItems" [selectionModel]="selected"></multi-select-dropdown>
       <span>{{selOut | json}}</span>
      `
})
export class AppComponent {
  dropItems: Array<DropdownItem> = [ {id: 1, text: 'Item1'}, {id: 2, text:'Item2'} ];
  selected: Array<DropdownSelectionItem> = [ {id: 2} ];
  selOut: Array<DropdownSelectionItem>;

  public onClick() : void {
    for (var i : number = 0; i < 100; i++) {
      this.dropItems.push( {id : i + 3, text : 'item' + (i + 3).toString() });
    }
  }

  onUpdate(ev: Array<DropdownSelectionItem>) {
    this.selOut = ev;
  }
 }

multiselect.component.ts

import { Input, Output, Component, EventEmitter } from 'angular2/core';

/*
 * Multi select dropdown for Angular 2 by @danfickle.
 * Based loosely on angular 1 multi select by @dotansimha (http://dotansimha.github.io/angularjs-dropdown-multiselect/)
 * Known to work with Angular 2.0.0-beta.0
 */

export interface DropdownItem {
  id: number,
  text: string
}

export interface DropdownSelectionItem {
  id: number
}

@Component({
  selector: 'multi-select-dropdown',
  template: `
    <div class="multiselect-parent btn-group dropdown-multiselect">
      <button type="button" class="dropdown-toggle btn btn-default" (click)="toggleDropdown()">
        <span *ngIf="selectionModel.length == 0">No selected items</span>
        <span *ngIf="selectionModel.length != 0">Selected Items:</span>
        {{ getButtonText() }}&nbsp;<span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-form" [style.display]="isOpen ? 'block' : 'none'" style="overflow: scroll" >
        <li><a href="#" (click)="deselectAll($event);"><span class="glyphicon glyphicon-remove"></span>&nbsp;Clear All</a></li>
        <li><div class="dropdown-header">
          <div class="control-group"><div class="input-group">
            <input type="text" class="form-control" [(ngModel)]="searchFilter" placeholder="Search" />
            <span class="glyphicon glyphicon-remove input-group-addon" (click)="clearSearch()"></span>
          </div></div>
          </div></li>
        <template ngFor #item [ngForOf]="items">
        <li role="presentation" *ngIf="searchFilter == '' || isShowItem(item.text)">
          <a href="#" role="menuitem" (click)="toggleSelectedItem($event, item.id)">
            <span class="glyphicon" [class.glyphicon-ok]="isChecked(item.id)"></span>
            {{item.text}}
          </a>
        </li>
        </template>
        <li *ngIf="items.length == 0">No items</li>
      </ul>
    </div>
  `
})
export class MutliSelectDropdownComponent {
  @Input() selectionModel: Array<DropdownSelectionItem>;
  @Input() items: Array<DropdownItem>;
  @Output() selectionModelChange: EventEmitter<Array<DropdownSelectionItem>> = new EventEmitter();
  isOpen: boolean = false;
  searchFilter: string = '';

  toggleDropdown() : void {
    this.isOpen = !this.isOpen;
  }

  clearSearch() : void {
    this.searchFilter = '';
  }

  isShowItem(txt: string) : boolean {
    return txt.toLowerCase().indexOf(this.searchFilter.toLowerCase()) >= 0;
  }

  deselectAll(ev: Event) : void {
    this.selectionModel = [];
    this.clearSearch();
    this.onUpdate();
    ev.preventDefault();
  }

  isChecked(id: number) : boolean {
    return this.selectionModel.findIndex((itm) => itm.id == id) >= 0;
  }

  onUpdate() : void {
    this.selectionModelChange.emit(this.selectionModel);
  }

  toggleSelectedItem(ev: Event, id: number) : void {
    const idx = this.selectionModel.findIndex((itm) => itm.id == id);

    if (idx >= 0) {
      this.selectionModel.splice(idx, 1);
    }
    else {
      this.selectionModel.push({ 'id' : id });
    }

    this.onUpdate();
    ev.preventDefault();
  }

  getButtonText(): string {
    const selectedTexts: Array<string> =
      this.items
          .filter((itm) => this.isChecked(itm.id))
          .map((itm) => itm.text);

    return selectedTexts.join(', ');
  }
}

Any Demo available ?