Angular 2 select

select.component.html

<h2>One way binding</h2>
<select [ngModel]="selectedItems" (ngModelChange)="onChange($event)" multiple>
  <option [ngValue]="i" *ngFor="let i of collection">{{i.name}}</option>
</select>

<h2>Two way binding</h2>
<button>Select all</button><button>Clear selection</button>
<select [(ngModel)]="selectedItems" (ngModelChange)="onChange($event)" multiple>
  <option [ngValue]="i" *ngFor="let i of collection">{{i.name}}</option>
</select>

<h2>Selected items</h2>
<p *ngFor="let selected of selectedItems">
  {{selected.name}}
</p>

select.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html'
})
export class SelectComponent implements OnInit {
  private collection = [
    {name: "test"}, 
    {name: "Test 2"},
    {name: "test 3"}
  ];

  selectedItems = [];

  constructor() { }

  ngOnInit() {
  }

  onChange(selection) {
    this.selectedItems = selection;
  }

  clearSelection() {
    this.selectedItems = [];
  }

  selectAll() {
    this.selectedItems = this.collection.slice();
  }
}