Decidí tomarme un tiempo este fin de semana para ver Angular 2 y Polymer. Estoy realmente interesado en angular 2 y realmente me gustaría comenzar a construir algo con él. Una desventaja de comenzar con Angular 2 ahora es que todavía no hay una buena biblioteca de componentes. Sin embargo, dado que Angular 2 afirma que debería funcionar tan bien junto con Web Components, pensé en probar Polymer. He logrado vincular datos a componentes simples como un campo de entrada. Por el momento, estoy atrapado en cómo vincular un modelo al objeto seleccionado de un menú desplegable de papel. Como soy muy nuevo en ambos, no sé cómo hacerlo, pero esto es lo que he intentado hasta ahora. ¿Alguien ha logrado vincular un modelo angular 2 a un menú desplegable de polímero?

<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>

EDITAR: ahora he creado un ValueAccessor que parece funcionar aceptable con una excepción. Intento que el menú desplegable tenga un valor preseleccionado estableciendo el atributo seleccionado en el método writeValue. Al principio, esto parecía funcionar, pero después de hacer este cambio ya no puedo cambiar el valor seleccionado. Funciona si codifico el valor en la plantilla, por lo que parece tener algo que ver con angular junto con polímero. Traté de seguir el stacktrace y comparar la diferencia entre los dos. Cuando codifico el valor, se ejecuta un método setter para seleccionado que desencadena un evento de selección de elemento. Cuando sigo el mismo rastro cuando configuro la propiedad en el valueAccessor, el método setter ya no se ejecuta. Parece ser un problema con la interacción entre angular 2 y el polímero.

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; }
}