<p dir="auto">see: <a href="http://plnkr.co/edit/FnmjWBd6flYiyUTkXuTs?p=preview" rel="nofollow">http://plnkr.co/edit/FnmjWBd6flYiyUTkXuTs?p=preview</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="EXCEPTION: Only one template directive per element is allowed: ng-if true and ng-for cannot be used simultaneously in null
...
EXCEPTION: TypeError: Cannot read property 'elementBinders' of undefined"><pre class="notranslate"><code class="notranslate">EXCEPTION: Only one template directive per element is allowed: ng-if true and ng-for cannot be used simultaneously in null
...
EXCEPTION: TypeError: Cannot read property 'elementBinders' of undefined
</code></pre></div>
<ul dir="auto">
<li>why do we print <code class="notranslate">ng-if true</code> rather than just <code class="notranslate">ng-if</code></li>
<li>why is there <code class="notranslate">null</code> at the end of error message?</li>
<li>what's up the second <code class="notranslate">elementBinders</code> exception?</li>
</ul>
<p dir="auto">Say I create a component:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'md-tile',
  host: {
    '[style.top]': 'style.top',
    '[style.left]': 'styl.left', // &lt;&lt;&lt; typo here
  },
})
@View(...)
class MdTile {}"><pre class="notranslate">@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'md-tile'</span><span class="pl-kos">,</span>
  <span class="pl-c1">host</span>: <span class="pl-kos">{</span>
    <span class="pl-s">'[style.top]'</span>: <span class="pl-s">'style.top'</span><span class="pl-kos">,</span>
    <span class="pl-s">'[style.left]'</span>: <span class="pl-s">'styl.left'</span><span class="pl-kos">,</span> <span class="pl-c">// &lt;&lt;&lt; typo here</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
@<span class="pl-smi">View</span><span class="pl-kos">(</span>...<span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">MdTile</span> <span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">Run this component and you get</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError: Cannot read property 'left' of undefined in [styl.left in hostProperties of null]"><pre class="notranslate"><code class="notranslate">TypeError: Cannot read property 'left' of undefined in [styl.left in hostProperties of null]
</code></pre></div>
<p dir="auto">The error here is decent, but the <code class="notranslate">hostProperties of null</code> part seems like it should actually be providing the name of the Component.</p>