title: Optional attribute binding
body: <p>I'm building a custom checkbox component that wraps a real <code>input</code> and makes it look stylish.</p>
  
  <p>One requirement for my custom checkbox is being able to bind an <strong>optional</strong> name so that the checkbox can be submitted as part of a form.</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
      selector: 'my-checkbox'
      template: `
      &lt;input type="checkbox" [name]="name"&gt;
      `
      /*, ...etc */
  })
  export class MyCheckbox implements ControlValueAccessor {
      @Input() name: string;
  
      // ...etc
  }
  </code></pre>
  
  <p>Usage:
  </p>
  
  <pre><code>&lt;!-- named--&gt;
  &lt;my-checkbox [(ngModel)]="vm" name="coolcool"&gt;&lt;/my-checkbox&gt;
  
  &lt;!-- unnamed--&gt;
  &lt;my-checkbox [(ngModel)]="vm"&gt;&lt;/my-checkbox&gt;
  </code></pre>
  
  <p>The output of the named example looks just fine</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- named output --&gt;
  &lt;my-checkbox&gt;
      &lt;input type="checkbox" name="coolcool"&gt;
  &lt;/my-checkbox&gt;
  </code></pre>
  
  <p>...but the output of the unnamed example also has a name attribute?!</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- unnamed output --&gt;
  &lt;my-checkbox&gt;
      &lt;input type="checkbox" name="undefined"&gt;
  &lt;/my-checkbox&gt;
  </code></pre>
  
  <p>How do I make <code>name="undefined"</code> go away?</p>