Polymer paper-dropdown-menu can't set and get selected value when binding with ngModel in Angular2

Question

I am trying to use polymer paper-dropdown-menu and paper-listbox. Now I am having problem in binding.

Here is dropdown list:

 <select name="singleSelect" [ngModel]="(person | async).department"> 
    <option *ngFor="let x of departments">
       {{x.name}}</option> 
 </select>

I converted into paper-listbox or paper-dropdown-menu

<paper-listbox #department 
        ngDefaultControl name="department" 
        [ngModel]="person.department" 
        label="department" > 
   <paper-item *ngFor="let x of departments"> 
        {{ x.name }} 
   </paper-item> 
</paper-listbox>

departments = [{name: 'HR'}, {name: 'IT'}, {name: 'Admin'}, {name: 'Management'}];

I couldn't get and set selected value.

Please help!

Answer 1

Finally I found the solution:

<paper-dropdown-menu label="Department" #dropdown1>-->
<paper-listbox #department2 ngDefaultControl name="department2" class="dropdown-content" [ngModel]="(person | async).department"
    selected="{{(person | async).department}}" attr-for-selected="value">
    <paper-item *ngFor="let x of (departments|async)" [value]="x.label">
        {{ x.label }}
    </paper-item>
</paper-listbox>

Answer 2

This worked for me. Say you are trying to set the ngModel to a variable called item.setting .

For my usage, I am using ngFor to dynamically create a list of listboxes. You will need to make sure you include import { ViewChildren } from '@angular/core'; . The function setItemSetting() will set whatever is selected on the listbox to item.setting .

 @ViewChildren('paperListbox') paperListboxes; setItemSetting(index) { return this.paperListboxes.toArray()[index].nativeElement.selected; } 

 <div *ngFor="let item of items; let i = index;"> <paper-dropdown-menu label="Department"> <paper-listbox ngDefaultControl #paperListbox class="dropdown-content" (click)="item.setting = setItemSetting(i);"> <paper-item value="0">Item 1</paper-item> <paper-item value="1">Item 2</paper-item> </paper-listbox> </paper-dropdown-menu> </div> 

If you only need one listbox, you can do something like this. In this example, you'll need to include import { ViewChild } from '@angular/core'; .

 @ViewChild('paperListbox') paperListbox; setItemSetting() { return this.paperListbox.nativeElement.selected; } 

  <paper-dropdown-menu label="Department"> <paper-listbox ngDefaultControl #paperListbox class="dropdown-content" (click)="item.setting = setItemSetting();"> <paper-item value="0">Item 1</paper-item> <paper-item value="1">Item 2</paper-item> </paper-listbox> </paper-dropdown-menu>