<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>
Multiple <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/HostBinding/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/HostBinding">@HostBinding</a> decorators re not handled properly. Only last one is used.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
All decorators must be used</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Create a component and set multiple HostBindings to single field, like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Input()
@HostBinding(&quot;style.width.px&quot;)
@HostBinding(&quot;style.height.px&quot;)
@HostBinding(&quot;style.min-width.px&quot;)
@HostBinding(&quot;style.min-height.px&quot;)
public size: number = 30;"><pre class="notranslate"><code class="notranslate">@Input()
@HostBinding("style.width.px")
@HostBinding("style.height.px")
@HostBinding("style.min-width.px")
@HostBinding("style.min-height.px")
public size: number = 30;
</code></pre></div>
<p dir="auto">Only last decorator is used when app is compiled, both in JIT and AoT.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Does not work as expected.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Ubuntu 16.04</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
2.3.0</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript 2.0.10]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   4.2.6</p>
</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[x] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">When defining a <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/HostBinding/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/HostBinding">@HostBinding</a> on an attribute directive referring to an <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/input/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/input">@input</a> property of the host component, it does not update the host property after changing the value.</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/HostBinding/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/HostBinding">@HostBinding</a> should probably apply to all properties of the host, including <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/input/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/input">@input</a> properties.</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<p dir="auto">Plunker: <a href="https://embed.plnkr.co/kQEKbT/" rel="nofollow">https://embed.plnkr.co/kQEKbT/</a><br>
Stackoverflow question and answer with solution using a template reference variable: <a href="http://stackoverflow.com/questions/38771403/how-to-use-hostbinding-with-input-properties-in-angular-2" rel="nofollow">http://stackoverflow.com/questions/38771403/how-to-use-hostbinding-with-input-properties-in-angular-2</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">In the example above: the attribute directive should feed the input property of the component.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">See Plunker above. This could be useful when you want to create a directive that feeds the input of a component.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.4</li>
<li><strong>Browser:</strong> Chrome 51 (likely applies to all)</li>
<li><strong>Language:</strong> TypeScript 1.8.10 (likely applies to all)</li>
</ul>