Bind angular 2 polymer drop-down model

Question

I decided to spend some time this weekend to look at Angular 2 and Polymer. I am really interested in Angular 2, and I would really like to start creating something with it. One drawback starting with Angular 2 is that there is as yet no good component library. However, since Angular 2 claims that it should work so well with web components, I thought about trying Polymer. I managed to bind data to simple components such as an input field. At the moment, I'm stuck with how to bind a model to a selected drop-down menu object. Since I am very new to both, I do not know how to do this, but this is what I have tried so far. Has anyone linked the Angular 2 model to polymer dropout?

<paper-dropdown-menu > <paper-menu class="dropdown-content" valueattr="id" [(ng-model)]="model"> <paper-item *ng-for="#m of options" id="{{m.id}}" (click)="onClick()">{{m.name}}</paper-item> </paper-menu> </paper-dropdown-menu> 

EDIT: I have now created a ValueAccessor that seems to work with one exception. I am trying to get a drop-down menu to have a preselected value by setting the selected attribute in the writeValue method. At first it worked, but after I made this change, I can no longer change the selected value. It works if I hardcode the value in the template, so it seems to have something to do with Angular along with the polymer. I tried to execute stacktrace and compare the difference between the two. When I rigidly set the value, the setter method is executed for the selected one, which fires the item select event. When I follow the same trace, when I set the property to valueAccessor, the setter method no longer executes. There seems to be a problem with the interaction between Angular 2 and the polymer.

 import {Directive, ControlValueAccessor, ElementRef, Renderer, NG_VALUE_ACCESSOR, Provider, forwardRef} from "angular2/angular2" import {isBlank, CONST_EXPR} from 'angular2/src/facade/lang'; import {setProperty} from "angular2/src/common/forms/directives/shared" const PAPER_DROPDOWN_VALUE_ACCESSOR = CONST_EXPR(new Provider( NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PaperDrowpdownMenuAccessor), multi: true})); @Directive({ selector: 'paper-menu[ng-model]', bindings: [PAPER_DROPDOWN_VALUE_ACCESSOR] }) export class PaperDrowpdownMenuAccessor implements ControlValueAccessor { onChange = (_) => {}; onTouched = () => {}; constructor(private _renderer: Renderer, private _elementRef: ElementRef) { var self = this; this._elementRef.nativeElement.addEventListener('iron-select', function(e, v, s){ console.log(e.target.selected); self.onChange(e.target.selected); }); } writeValue(value: any): void { if(value){ if(this._elementRef.nativeElement.select) { this._elementRef.nativeElement.select(value); } else { //this._elementRef.nativeElement.attributes["selected"] setProperty(this._renderer, this._elementRef, 'selected', value); } } } registerOnChange(fn: () => any): void { this.onChange = fn; } registerOnTouched(fn: () => any): void { this.onTouched = fn; } } 

Answer 1

I finally solved this on my own by implementing a custom Value Accessor, mainly by looking at how the default accesssor value is being implemented. https://github.com/angular/angular/blob/2.0.0-alpha.46/modules/angular2/src/common/forms/directives/default_value_accessor.ts

I worked a bit with this because the Paper menu requires the pre-selected value to be set as an attribute in the rendered html. In my first attempt, I used the corner inner setProperty to set the selected value. However, this sets the DOM property, not the HTML attribute, and this polymer did not create the get property, the set selected property, which forbade the menu to fire the select-select event, which listens on the drop-down menu. Lesson learned, remember the difference between HTML and the DOM.

 import {Directive, ControlValueAccessor, ElementRef, Renderer, NG_VALUE_ACCESSOR, Provider, forwardRef} from "angular2/angular2" import {CONST_EXPR} from 'angular2/src/facade/lang'; const PAPER_MENU_VALUE_ACCESSOR = CONST_EXPR(new Provider( NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PaperMenuAccessor), multi: true})); @Directive({ selector: 'paper-menu[ng-model]', bindings: [PAPER_MENU_VALUE_ACCESSOR] }) export class PaperMenuAccessor implements ControlValueAccessor { onChange = (_) => {}; onTouched = () => {}; constructor(private _renderer: Renderer, private _elementRef: ElementRef) { this._elementRef.nativeElement.addEventListener('iron-select', (e) => { this.onChange(e.target.selected); }); } writeValue(value: any): void { if(this._elementRef.nativeElement.select) { this._elementRef.nativeElement.select(value); } else { this._elementRef.nativeElement.setAttribute("selected", value); } } registerOnChange(fn: () => any): void { this.onChange = fn; } registerOnTouched(fn: () => any): void { this.onTouched = fn; } }