ngModel Binding on Polymer dropdown (Angular2)

Question

Ok so far I was successfully able to bind , with ngModel by using a Custom ControlValueAccessor

Answer 1

Full working example. I didn't find a proper way to apply the ControlValueAccessor to but instead added it to the embeeded . The only disadvantage is that you might need a different ControlValueAccessor if you use a different content for , the advantage is that you can use the ControlValueAccessor with even when it's not wrapped in a

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: `
Hello {{name}}


  Item 1
  Item 2




  
    {{item}}
  


selected: {{items[selected]}}
      
  `,
})
export class AppComponent {
  items = ['allosaurus', 'brontosaurus', 'carcharodontosaurus', 'diplodocus'];
  selected = 3;
  name:string;

  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  ngAfterViewInit() {
    //this.selected = this.diplodocus;
  }
}

Plunker example

Update

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