Delegate bindings from Angular 2 component to nested element

These bindings work great:

<input type="checkbox" (click)="foo.bar()" [(ngModel)]="foo.baz">

But how do I delegate those bindings to an input inside a component?

<custom-checkbox>Check me!</custom-checkbox>

...and here's the "custom-checkbox.component.html":

<span class="checkbox-wrap">
  <input type="checkbox" class="checkbox"> <!-- This should have all the bindings -->
  <span class="checkbox-styling"></span>
  <span class="checkbox-label"><ng-content></ng-content></span>
</span>

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 Custom form controls in Angular, Angular docs, other somewhat-similar Stack Overflow questions, and the TypeScript used on Angular 2's Material Checkbox but I still don't get how they pulled this off. It's seems like it should be more straight forward.

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.

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 Angular 2 Material checkbox is.

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,

<md-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations.

and that's what I'm trying to do.