<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></p>

<p dir="auto">The following template describes using a structural directive with 2 options:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;h1 *myDirective=&quot;firstOption: true; secondOption: false&quot;&gt;Hello&lt;/h1&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">h1</span> <span class="pl-c1">*myDirective</span>="<span class="pl-s">firstOption: true; secondOption: false</span>"<span class="pl-kos">&gt;</span>Hello<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">But writing such a template results in the error: <code class="notranslate">Error: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined</code>.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;h1 *myDirective=&quot;firstOption: true; secondOption: false&quot;&gt;Hello&lt;/h1&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">h1</span> <span class="pl-c1">*myDirective</span>="<span class="pl-s">firstOption: true; secondOption: false</span>"<span class="pl-kos">&gt;</span>Hello<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">should de-sugarize to:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template myDirective [myDirectiveFirstOption]=&quot;true&quot; [myDirectiveSecondOption]=&quot;false&quot;&gt;
    &lt;h1&gt;Hello&lt;/h1&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">myDirective</span> <span class="pl-c1">[myDirectiveFirstOption]</span>="<span class="pl-s">true</span>" <span class="pl-c1">[myDirectiveSecondOption]</span>="<span class="pl-s">false</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>Hello<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">This is what the microsyntax documentation describes.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="http://plnkr.co/edit/sMFv2iGJoOdCRlWpIs40?p=preview" rel="nofollow">http://plnkr.co/edit/sMFv2iGJoOdCRlWpIs40?p=preview</a><br>
The plunker crashes with the described error.<br>
Using the manually de-sugarized</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;ng-template myDirective [myDirectiveFirstOption]=&quot;true&quot; [myDirectiveSecondOption]=&quot;false&quot;&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">ng-template</span> <span class="pl-c1">myDirective</span> <span class="pl-c1">[myDirectiveFirstOption]</span>="<span class="pl-s">true</span>" <span class="pl-c1">[myDirectiveSecondOption]</span>="<span class="pl-s">false</span>"<span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">makes it work fine.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">When writing reusable components and directives, offering the asterisk syntax is an important part of making the API easy to learn and understand. It follows the <code class="notranslate">*ngIf</code> and <code class="notranslate">*ngFor</code> lead people are used to.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.X</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> all</li>
</ul>

<ul dir="auto">
<li><strong>Language:</strong> all</li>
</ul>
<p dir="auto">See example: <a href="http://plnkr.co/edit/9GdLbXM0mh5zHPKhcwCL?p=info" rel="nofollow">http://plnkr.co/edit/9GdLbXM0mh5zHPKhcwCL?p=info</a></p>
<p dir="auto">Both of these should parse correctly:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div *bsPane=&quot;title exp&quot;&gt;&lt;/div&gt;
&lt;div *bsPane=&quot;title: exp&quot;&gt;&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div *bsPane="title exp"&gt;&lt;/div&gt;
&lt;div *bsPane="title: exp"&gt;&lt;/div&gt;
</code></pre></div>
<p dir="auto">Given:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Directive({
  selector: '[bsPane]'
})
class Foo {
  @Input() bsPaneTitle: string;
}"><pre class="notranslate"><code class="notranslate">@Directive({
  selector: '[bsPane]'
})
class Foo {
  @Input() bsPaneTitle: string;
}
</code></pre></div>
<p dir="auto">instead get error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Can't bind to 'bsPane' since it isn't a known native property (&quot;
    Demo:
    &lt;div [ERROR -&gt;]*bsPane=&quot;title 'Overview'&quot;&gt;&lt;/div&gt;
    &lt;div *bsPane=&quot;title 'Summary'&quot;&gt;&lt;/div&gt;&quot;): DiDemo@2:9
Property binding bsPane not used by any directive on an embedded template (&quot;
    Demo:
    [ERROR -&gt;]&lt;div *bsPane=&quot;title 'Overview'&quot;&gt;&lt;/div&gt;
    &lt;div *bsPane=&quot;title 'Summary'&quot;&gt;&lt;/div&gt;&quot;): DiDemo@2:4
Can't bind to 'bsPane' since it isn't a known native property (&quot;
    Demo:
    &lt;div *bsPane=&quot;title 'Overview'&quot;&gt;&lt;/div&gt;
    &lt;div [ERROR -&gt;]*bsPane=&quot;title 'Summary'&quot;&gt;&lt;/div&gt;&quot;): DiDemo@3:9
Property binding bsPane not used by any directive on an embedded template (&quot;
    Demo:
    &lt;div *bsPane=&quot;title 'Overview'&quot;&gt;&lt;/div&gt;
    [ERROR -&gt;]&lt;div *bsPane=&quot;title 'Summary'&quot;&gt;&lt;/div&gt;&quot;): DiDemo@3:4```"><pre class="notranslate"><code class="notranslate">Can't bind to 'bsPane' since it isn't a known native property ("
    Demo:
    &lt;div [ERROR -&gt;]*bsPane="title 'Overview'"&gt;&lt;/div&gt;
    &lt;div *bsPane="title 'Summary'"&gt;&lt;/div&gt;"): DiDemo@2:9
Property binding bsPane not used by any directive on an embedded template ("
    Demo:
    [ERROR -&gt;]&lt;div *bsPane="title 'Overview'"&gt;&lt;/div&gt;
    &lt;div *bsPane="title 'Summary'"&gt;&lt;/div&gt;"): DiDemo@2:4
Can't bind to 'bsPane' since it isn't a known native property ("
    Demo:
    &lt;div *bsPane="title 'Overview'"&gt;&lt;/div&gt;
    &lt;div [ERROR -&gt;]*bsPane="title 'Summary'"&gt;&lt;/div&gt;"): DiDemo@3:9
Property binding bsPane not used by any directive on an embedded template ("
    Demo:
    &lt;div *bsPane="title 'Overview'"&gt;&lt;/div&gt;
    [ERROR -&gt;]&lt;div *bsPane="title 'Summary'"&gt;&lt;/div&gt;"): DiDemo@3:4```
</code></pre></div>
<p dir="auto">and</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="EXCEPTION: Template parse errors:
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 13 in [bsPane title: 'Overview'] in DiDemo@2:9 (&quot;
    Demo:
    &lt;div [ERROR -&gt;]*bsPane=&quot;title: 'Overview'&quot;&gt;&lt;/div&gt;
    &lt;div *bsPane=&quot;title: 'Summary'&quot;&gt;&lt;/div&gt;&quot;): DiDemo@2:9
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 13 in [bsPane title: 'Summary'] in DiDemo@3:9 (&quot;
    Demo:
    &lt;div *bsPane=&quot;title: 'Overview'&quot;&gt;&lt;/div&gt;
    &lt;div [ERROR -&gt;]*bsPane=&quot;title: 'Summary'&quot;&gt;&lt;/div&gt;&quot;): DiDemo@3:9"><pre class="notranslate"><code class="notranslate">EXCEPTION: Template parse errors:
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 13 in [bsPane title: 'Overview'] in DiDemo@2:9 ("
    Demo:
    &lt;div [ERROR -&gt;]*bsPane="title: 'Overview'"&gt;&lt;/div&gt;
    &lt;div *bsPane="title: 'Summary'"&gt;&lt;/div&gt;"): DiDemo@2:9
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 13 in [bsPane title: 'Summary'] in DiDemo@3:9 ("
    Demo:
    &lt;div *bsPane="title: 'Overview'"&gt;&lt;/div&gt;
    &lt;div [ERROR -&gt;]*bsPane="title: 'Summary'"&gt;&lt;/div&gt;"): DiDemo@3:9
</code></pre></div>