<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><br>
In component decorator, <code class="notranslate">selector</code> is unable to select id by <code class="notranslate">hashtag (#)</code></p>
<p dir="auto"><strong>Expected behavior</strong><br>
Component selector should be able to select id by <code class="notranslate">hashtag (#)</code></p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Simply change you component selector by using <code class="notranslate">#id</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
    selector: '#top-navigation',
    templateUrl: './top-navigation.component.html',
    styleUrls: ['./top-navigation.component.scss']
})"><pre class="notranslate"><code class="notranslate">@Component({
    selector: '#top-navigation',
    templateUrl: './top-navigation.component.html',
    styleUrls: ['./top-navigation.component.scss']
})
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Currently, I need to select it like,</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
    selector: '[id=top-navigation]',
    templateUrl: './top-navigation.component.html',
    styleUrls: ['./top-navigation.component.scss']
})"><pre class="notranslate"><code class="notranslate">@Component({
    selector: '[id=top-navigation]',
    templateUrl: './top-navigation.component.html',
    styleUrls: ['./top-navigation.component.scss']
})
</code></pre></div>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Ubuntu 14.04, Sublime, Webpack, Apache</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X<br>
Angular 2.0.0</li>
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]<br>
All browsers</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript 2.0.2</li>
</ul>
<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"><pre class="notranslate"><code class="notranslate">[x] bug report
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
<code class="notranslate">select: '#my-component'</code> doesn't work.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Given <code class="notranslate">&lt;div id="my-component"&gt;&lt;/div&gt;</code> in a template, <code class="notranslate">select: '#my-component'</code> should work the same, as the following combinations work:<br>
<code class="notranslate">select: 'my-component'</code> works for <code class="notranslate">&lt;my-component&gt;&lt;/my-component&gt;</code><br>
<code class="notranslate">select: [my-component]</code> works for <code class="notranslate">&lt;div my-component&gt;&lt;/div&gt;</code><br>
<code class="notranslate">select: '.my-component'</code> works for <code class="notranslate">&lt;div class="my-component"&gt;&lt;/div&gt;</code></p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
<a href="https://plnkr.co/edit/rbMDTr15R51CVvWHC1V5?p=preview" rel="nofollow">https://plnkr.co/edit/rbMDTr15R51CVvWHC1V5?p=preview</a></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.1</li>
<li><strong>Browser:</strong> [ only tested in Chrome and Firefox ]</li>
<li><strong>Language:</strong> [ TypeScript ]</li>
</ul>