title: Delegate bindings from Angular 2 component to nested element
body: <p>These bindings work great:</p>
  
  <pre><code>&lt;input type="checkbox" (click)="foo.bar()" [(ngModel)]="foo.baz"&gt;
  </code></pre>
  
  <p>But how do I delegate those bindings to an input <em>inside</em> a component?</p>
  
  <pre><code>&lt;custom-checkbox&gt;Check me!&lt;/custom-checkbox&gt;
  </code></pre>
  
  <p>...and here's the "custom-checkbox.component.html":</p>
  
  <pre><code>&lt;span class="checkbox-wrap"&gt;
    &lt;input type="checkbox" class="checkbox"&gt; &lt;!-- This should have all the bindings --&gt;
    &lt;span class="checkbox-styling"&gt;&lt;/span&gt;
    &lt;span class="checkbox-label"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I've been using Angular 1 for a couple years, but just started using Angular 2 this week.  I've read many articles such as <a href="https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html" rel="nofollow noreferrer">Custom form controls in Angular</a>, Angular docs, other somewhat-similar Stack Overflow questions, and the <a href="https://github.com/angular/material2/blob/master/src/lib/checkbox/checkbox.ts" rel="nofollow noreferrer">TypeScript</a> used on Angular 2's <a href="https://material.angular.io/components/component/checkbox" rel="nofollow noreferrer">Material Checkbox</a> but I still don't get how they pulled this off. It's seems like it should be more straight forward.</p>
  
  <p>This is one of many custom UI elements I need to make, so I'm hoping this example will help me understand the principles and implementation I'm missing.</p>
  
  <p>I know I could use a input checkbox with a selector on it, and wrap it, but I want to be as clean as the <a href="https://material.angular.io/components/component/checkbox" rel="nofollow noreferrer">Angular 2 Material checkbox</a> is.</p>
  
  <p>I'm essentially doing the same thing they are (Angular 2 Material), but with our own styling, and much more simplistic than all the options they provide. Just like they said, </p>
  
  <blockquote>
    <p>&#60;md-checkbox> provides the same functionality as a native &#60;input type="checkbox"> enhanced with Material Design styling and animations.</p>
  </blockquote>
  
  <p>and that's what I'm trying to do.</p>