title: How to bind 'maxlength' attribute?
body: <p>I can render the following Angular 2 component containing an <code>&lt;input&gt;</code> with a <code>maxlength</code> set:</p>
  <pre><code>@Component({
    selector: 'app',
    template: '&lt;input maxlength=&quot;10&quot;&gt;',
  })
  export class App {
  }
  </code></pre>
  <p>This works fine. However, if I try to set the <code>maxlength</code> via a binding, like this:</p>
  <pre><code>@Component({
    selector: 'app',
    template: '&lt;input [maxlength]=&quot;maxLength&quot;&gt;',
  })
  export class App {
      maxLength = 10;
  }
  </code></pre>
  <p>Or like this:</p>
  <pre><code>  template: '&lt;input maxlength=&quot;{{maxLength}}&quot;&gt;',
  </code></pre>
  <p>I get the following error:</p>
  <pre><code>&quot;Template parse errors: Can't bind to 'maxlength' since it isn't a known property of 'input'.&quot;
  </code></pre>
  <p>Why? <code>maxlength</code> is a perfectly valid property of an <code>&lt;input&gt;</code> element.</p>
  <p>Here's a <a href="http://plnkr.co/edit/cxb10urctYezQUuPGyTj?p=preview" rel="nofollow noreferrer">live example</a> (open console to see error).</p>