title: Angular 2 Polymer and a PaperChechboxSelectedDirective
body: <p>I am trying to get Ng2 an Polymer to work together. To do so my objective is to create some Directives that listen to the paper-elements and converts the events or do whatever needs to be done to make angular understand the user interactions.</p>
  
  <p>If I do this:</p>
  
  <pre><code>&lt;paper-checkbox [checked]="bar" (change)="bar = $event.target.__data__.checked"&gt;
      Mark all as complete
  &lt;/paper-checkbox&gt;
  </code></pre>
  
  <p>I get bi-directional binding working with Ng2 (it's weird that I have to look into <strong>data</strong> to find the value of the checkbox though... any pointers on that one anyone ?). </p>
  
  <p>So every thing work but I would like to cut on the ceremonies and have a Directive that get my 'bar' expression and sets it via the onChange Handler. Is this possible ?</p>
  
  <p>The paper-checkbox directive</p>
  
  <pre><code>  @Directive({selector: 'paper-checkbox'})
    class PaperChechboxSelectedDirective {
  
      @Output() checkedChange:EventEmitter&lt;any&gt; = new EventEmitter();
  
      constructor(private element: ElementRef) {
        console.log('PaperChechboxSelectedDirective');
      }
  
      @HostListener('iron-change', ['$event'])
      onChange(e) {
  
      }
    }
  </code></pre>