title: Angular - component selector using ID
body: <p>I want to use an element ID for a component selector but it doesn't work.</p>
  
  <p>Is this not allowed in Angular? If so why not?</p>
  
  <p>(so a selector of <code>.btnAction</code> matches, and the button is inserted into Component 1's template, but <code>#btnAction</code> doesn't)</p>
  
  <p>I'm not sure this is necessary, but here's the code through which I've confirmed that <em>other</em> CSS selectors work (like class and attribute), but ID's don't.</p>
  
  <p><strong>Component 1</strong></p>
  
  <pre><code>@Component({
      selector: 'myelement',
      template: `&lt;div id="btnAction" class="btnAction"&gt;&lt;/div&gt;`,
      directives: [ActionBtn]
  })
  </code></pre>
  
  <p><strong>Component 2</strong></p>
  
  <pre><code>@Component({
      selector: '#btnAction',
      template: `&lt;button&gt;{{btnTitle}}&lt;/button&gt;`
  })
  </code></pre>