NgModel Binding on Polymer Dropout (Angular2)

Question

Ok, so far I have successfully linked <paper-radio> , <paper-checkbox> with ngModel using Custom ControlValueAccessor for each of them. Now I'm stuck in <paper-dropdown-menu> In this scenario, I can write a drop-down list (iron-select), but cannot communicate in two ways, i.e. Using ngModel below, this is HTML and user class accessor

My form.html

 <paper-dropdown-menu [(ngModel)]="mymodel.selection" label="Your Fix"> <paper-menu class="dropdown-content"> <paper-item value="1" ngDefaultControl>Coffee</paper-item> <paper-item value="2" ngDefaultControl>Cigarettes</paper-item> <paper-item value="3" ngDefaultControl>Chivas</paper-item></paper-menu> </paper-dropdown-menu> 

And my custom Accessor class

 /** * Created by pratik on 12/5/16. */ import { Query, Directive, Renderer, Self, forwardRef, Provider, ElementRef, QueryList } from 'angular2/core'; import {ObservableWrapper} from 'angular2/src/facade/async'; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from 'angular2/common'; import {CONST_EXPR} from 'angular2/src/facade/lang'; const SELECT_VALUE_ACCESSOR = CONST_EXPR(new Provider( NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => SelectControlValueAccessor), multi: true})); /** * Marks `<option>` as dynamic, so Angular can be notified when options change. * * ### Example * * ``` * <select ngControl="city"> * <option *ngFor="#c of cities" [value]="c"></option> Need to change to paper-item * </select> * ``` */ @Directive({selector: 'option'}) // Tried changing to paper-item but still doesn't work export class NgSelectOption { } /** * The accessor for writing a value and listening to changes on a select element. */ @Directive({ selector: 'paper-dropdown-menu[ngControl],paper-dropdown-menu[ngFormControl],paper-dropdown-menu[ngModel]', host: { '(iron-select)': 'onChange($event.target.value)', '(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()' }, bindings: [SELECT_VALUE_ACCESSOR] }) export class SelectControlValueAccessor implements ControlValueAccessor { value: string; onChange = (_) => {}; onTouched = () => {}; constructor(private _renderer: Renderer, private _elementRef: ElementRef, @Query(NgSelectOption, {descendants: true}) query: QueryList<NgSelectOption>) { this._updateValueWhenListOfOptionsChanges(query); } writeValue(value: any): void { this.value = value; this._renderer.setElementProperty(this._elementRef, 'value', value); } registerOnChange(fn: () => any): void { this.onChange = fn; } registerOnTouched(fn: () => any): void { this.onTouched = fn; } private _updateValueWhenListOfOptionsChanges(query: QueryList<NgSelectOption>) { ObservableWrapper.subscribe(query.changes, (_) => this.writeValue(this.value)); } } 

Answer 1

Full working example. I did not find a suitable way to apply ControlValueAccessor to <paper-dropdown-menu> , but instead added it to the hugged <paper-listbox> . The only drawback is that you may need another ControlValueAccessor if you use different content for <paper-dropdown-menu> , the advantage is that you can use ControlValueAccessor with <paper-listbox> , even if it is not wrapped in <paper-dropdown-menu>

 import { Component, Directive, Renderer, forwardRef, Provider, ElementRef, ViewEncapsulation, } from '@angular/core'; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/common'; 

 const PAPER_MENU_VALUE_ACCESSOR = new Provider( NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PaperMenuControlValueAccessor), multi: true}); @Directive({ selector: 'paper-listbox', host: {'(iron-activate)': 'onChange($event.detail.selected)'}, providers: [PAPER_MENU_VALUE_ACCESSOR] }) export class PaperMenuControlValueAccessor implements ControlValueAccessor { onChange = (_:any) => { }; onTouched = () => { }; constructor(private _renderer:Renderer, private _elementRef:ElementRef) { console.log('PaperMenuControlValueAccessor'); } writeValue(value:any):void { //console.log('writeValue', value); this._renderer.setElementProperty(this._elementRef.nativeElement, 'selected', value); } registerOnChange(fn:(_:any) => {}):void { this.onChange = fn; } registerOnTouched(fn:() => {}):void { this.onTouched = fn; } } 

 @Component({ selector: 'my-app', directives: [PaperMenuControlValueAccessor], encapsulation: ViewEncapsulation.None, template: ` <h2>Hello {{name}}</h2> <paper-menu> <paper-item>Item 1</paper-item> <paper-item>Item 2</paper-item> </paper-menu> <paper-dropdown-menu label="Dinosaurs" > <paper-listbox class="dropdown-content" [(ngModel)]="selected"> <paper-item *ngFor="let item of items">{{item}}</paper-item> </paper-listbox> </paper-dropdown-menu> <div>selected: {{items[selected]}}</div> `, }) export class AppComponent { items = ['allosaurus', 'brontosaurus', 'carcharodontosaurus', 'diplodocus']; selected = 3; name:string; constructor() { this.name = 'Angular2 (Release Candidate!)' } ngAfterViewInit() { //this.selected = this.diplodocus; } } 

Plunger example

Update

I found a similar answer for PaperDropdownMenu instead of PaperListbox Bind angular 2 model for a dropdown