title: Why does simply [myHighlight]="..." work for an attribute directive?
body: <p>The <code>myHighlight</code> attribute directive in the <a href="https://angular.io/docs/ts/latest/guide/attribute-directives.html" rel="noreferrer">dev guide</a> uses the <code>myHighlight</code> name as both the attribute selector:</p>
  
  <pre><code>selector: '[myHighlight]',
  </code></pre>
  
  <p>and an input property:</p>
  
  <pre><code>@Input('myHighlight') highlightColor: string;
  </code></pre>
  
  <p>I find it odd/counterintuitive that we don't have to specify the selector attribute like this (although if we do write it this way, it still works):</p>
  
  <pre><code>&lt;span myHighlight [myHighlight]="color"&gt;highlight me&lt;/span&gt;
  </code></pre>
  
  <p>Instead, we only have to specify the input property, and we magically get the directive as well:</p>
  
  <pre><code>&lt;span [myHighlight]="color"&gt;highlight me&lt;/span&gt;
  </code></pre>
  
  <p>I don't like this "shortcut"/syntactic sugar/magic, since it looks like we're binding to the <code>myHighlight</code> property of the <code>span</code> element, rather than what is actually happening: we're binding to the <code>myHighlight</code> property of the <code>myHighlight</code> attribute directive.  So, just by looking at the HTML, we can't easily determine which element/component/directive the <code>myHighlight</code> property is bound to.</p>
  
  <p>Why does it work this way?</p>
  
  <p>Consider this HTML fragment:</p>
  
  <pre><code>&lt;div [accessKey]="..."&gt;
  </code></pre>
  
  <p>Is <code>accessKey</code> an HTML element property or an attribute directive with an input property also named <code>accessKey</code>?  (FYI, <code>accessKey</code> is a valid HTML element property, so this example is not an attribute directive.)</p>
  
  <p>Getting back to the highlight directive... if I change the input property name to <code>highlightColor</code>:</p>
  
  <pre><code>@Input() highlightColor: string;
  </code></pre>
  
  <p>Then I have to specify the attribute selector along with the property binding, which I find less ambiguous:</p>
  
  <pre><code>&lt;span myHighlight [highlightColor]="color"&gt;highlight me&lt;/span&gt;
  </code></pre>
  
  <p>So the "shortcut" only seems to work if the input property name matches the attribute selector.</p>
  
  <p><strong>Update:</strong> it seems <a href="https://angular.io/docs/ts/latest/guide/structural-directives.html" rel="noreferrer">structural directives</a> use the same trick/shortcut.  E.g., </p>
  
  <pre><code>&lt;p *ngIf="condition"&gt;
    text here
  &lt;/p&gt;
  </code></pre>
  
  <p>is equivalent to </p>
  
  <pre><code>&lt;template [ngIf]="condition"&gt;  &lt;--- binds input property ngIf to NgIf directive, not to template
    &lt;p&gt;
      text here
    &lt;/p&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I just don't like the mixing of property name and selector.</p>