<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><br>
Two oddities when using microsyntax to set variables on structural directives:</p>
<ol dir="auto">
<li>An unused <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> named exactly like the selector is required on structural directives.</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Directive({
  selector: '[aDirective][aDirectiveFoo]',
  ...
})
export class ADirective {
  @Input() aDirective: any;  // Required, but explicitly set to &quot;undefined&quot;.
  @Input() aDirectiveFoo: string;
}"><pre class="notranslate"><code class="notranslate">@Directive({
  selector: '[aDirective][aDirectiveFoo]',
  ...
})
export class ADirective {
  @Input() aDirective: any;  // Required, but explicitly set to "undefined".
  @Input() aDirectiveFoo: string;
}
</code></pre></div>
<ol start="2" dir="auto">
<li>An extraneous character followed by a space is required at the beginning for it to work.</li>
</ol>
<p dir="auto">Doesn't work:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;a-component *aDirective=&quot;foo:'bar'&quot;&gt;
&lt;a-component *aDirective=&quot; foo:'bar'&quot;&gt;"><pre class="notranslate"><code class="notranslate">&lt;a-component *aDirective="foo:'bar'"&gt;
&lt;a-component *aDirective=" foo:'bar'"&gt;
</code></pre></div>
<p dir="auto">Works:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;a-component *aDirective=&quot;z foo:'bar'&quot;&gt;
&lt;a-component *aDirective=&quot;config; foo:'bar'&quot;&gt;"><pre class="notranslate"><code class="notranslate">&lt;a-component *aDirective="z foo:'bar'"&gt;
&lt;a-component *aDirective="config; foo:'bar'"&gt;
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>
<ol dir="auto">
<li>Don't require or automatically insert the extraneous <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>.</li>
<li>Allow variable assignment without the required character and space.</li>
</ol>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto"><a href="https://plnkr.co/edit/aBT256OKZH4ayZT3J0sT" rel="nofollow">Plunker example here</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Allow richer initialization and use of structural directives.</p>
<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>