<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
A plain element attribute (no syntax sugar) containing a number value is being bound to the component as a string value.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
The attribute would be converted to the data type of the input variable it's being bound to... or at the very least the compiler would warn me of the data-type mismatch.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Create a component with the following property that uses the Input decorator:<br>
<code class="notranslate">@Input('maxlength') public maxLength: number;</code><br>
Use the custom component somewhere like so:<br>
<code class="notranslate">&lt;custom-component maxlength="250"&gt;&lt;/custom-component&gt;</code><br>
Note that the "maxLength" property in the JavaScript code contains a string value despite being defined as a number data type.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I want to be able to use a strict equals (===) to compare "maxLength" to "length", but that doesn't work if "maxLength" is a string and "length" is a number.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Windows 8.1, Visual Studio 2015, npm, IIS Express 10</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0</li>
<li><strong>Browser:</strong> Chrome 52.0.2743.116</li>
<li><strong>Language:</strong> TypeScript 1.8.10</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   using JIT, not AoT</li>
</ul>
<p dir="auto">When building reusable components, using boolean properties, such as <code class="notranslate">checked</code>, <code class="notranslate">disabled</code>, <code class="notranslate">readonly</code>, etc., is extremely common. This ends up looking like this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class CoolCheckbox {
  private _checked: boolean;

  @Input()
  get checked() {
    return this._checked;
  }

  set checked(v: boolean) {
    // Is &quot;checked&quot; if *any* value is present other than `false` or `&quot;false&quot;`.
    this._checked = value != null &amp;&amp; `${value}` !== 'false';
  }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">CoolCheckbox</span> <span class="pl-kos">{</span>
  <span class="pl-k">private</span> <span class="pl-c1">_checked</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span>

  @<span class="pl-smi">Input</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-k">get</span> <span class="pl-en">checked</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_checked</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">set</span> <span class="pl-en">checked</span><span class="pl-kos">(</span><span class="pl-s1">v</span>: <span class="pl-smi">boolean</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">// Is "checked" if *any* value is present other than `false` or `"false"`.</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_checked</span> <span class="pl-c1">=</span> <span class="pl-s1">value</span> <span class="pl-c1">!=</span> <span class="pl-c1">null</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">value</span><span class="pl-kos">}</span></span>`</span> <span class="pl-c1">!==</span> <span class="pl-s">'false'</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">This is a <em>lot</em> of boilerplate to create a simple boolean bound property, and something that needs to be done for <em>every</em> boolean <code class="notranslate">@Input</code>. The same problem also applies to <code class="notranslate">number</code> inputs.</p>
<p dir="auto">A simple approach for TypeScript users might be to create their own decorator, something like</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Input() @BooleanField() checked: boolean;"><pre class="notranslate">@<span class="pl-smi">Input</span><span class="pl-kos">(</span><span class="pl-kos">)</span> @<span class="pl-smi">BooleanField</span><span class="pl-kos">(</span><span class="pl-kos">)</span> checked: <span class="pl-s1">boolean</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Unfortunately, this is incompatible with using the offline-compiler, as the presence of user-defined decorators prevents tree-shaking. As such, this seems to be something that should really be built into the framework itself. This could look something like:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class CoolCheckbox {
  @BooleanInput() checked: boolean;
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">CoolCheckbox</span> <span class="pl-kos">{</span>
  @<span class="pl-smi">BooleanInput</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">checked</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/pkozlowski-opensource/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/pkozlowski-opensource">@pkozlowski-opensource</a> has encountered the same friction for ngBootstrap.</p>
<p dir="auto">cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tbosch/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tbosch">@tbosch</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mhevery/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mhevery">@mhevery</a></p>