bootstrap multiselect get value with Angular 2

Question

I want to get the value of the selected options in my multiselect dropdown list. But i do not get this done by ngModel..

Here the html:

 <div class="col-xs-offset-1 col-xs-3">
    <form class="btn-group" id="select-form">
        <select id="dropdown-list" multiple="multiple" [(ngModel)]="selectedObject"></select>
       <button type="reset" id="reset-button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span></button>
    </form>
</div>

and here the the for loop which append options to the select:

ngOnInit() {
    for(var i = 0; i < this.checks.length; i++){
        var append = this.checks[i];
        $('#dropdown-list').append('<option>'+ append.name +'</option>');
    }

This because the ngFor is not working here.. but that's not my question in this case.

Can somebody help me to log the selected options = [(ngModel)]="selectObject"

Answer 1

Multi-select does not seem to be supported yet, see https://github.com/angular/angular/issues/4427.

Here's a workaround (that does not use query selectors):

@Component({
  selector: 'my-app',
  template: `{{title}}<p>
  <select multiple="multiple" (change)="change($event.target.options)">
    <option *ngFor="#item of items">{{item}}</option>
  </select>
  <p>{{selectedOptions | json}}`
})
export class AppComponent {
  title = "Angular 2 beta - multi select list";
  items = 'one two three'.split(' ');
  constructor() { console.clear(); }
  change(options) {
    this.selectedOptions = Array.apply(null,options)  // convert to real array
      .filter(option => option.selected)
      .map(option => option.value)
  }
}

Plunker