CODEWITHSUNDEEP
angularpolymer
Si Thu
Si Thu

Reputation: 1205

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

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!

Upvotes: 0

Views: 318

Answers (2)

Prita Hasjim
Prita Hasjim

Reputation: 343

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>

Upvotes: 0

Si Thu
Si Thu

Reputation: 1205

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>

Upvotes: 0

Related Questions