<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="[] bug report 
[ x ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[] bug report 
[ x ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Querying ngContent with a superclass doesn't work.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Querying ngContent with a superclass should work.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Currently, if you have a component that uses ng-content inside of its template, it can render out whatever you pass to it. (ie. any other component or html). However referencing this component is only possible if you know exactly what component it will be.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@ContentChildren(Component1) myComponent;"><pre class="notranslate"><code class="notranslate">@ContentChildren(Component1) myComponent;
</code></pre></div>
<p dir="auto">In the case where you don't know, you can't select it. My request would be that you can select the components off a super class. Say, <code class="notranslate">Component1 extends MySuperClass</code> and <code class="notranslate">Component2 extends MySuperClass</code> you can select their instances like so:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@ContentChildren(MySuperClass) myComponents;"><pre class="notranslate"><code class="notranslate">@ContentChildren(MySuperClass) myComponents;
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
The motivation behind this is allowing dynamic components to be injected yet allow their instance to be referenced by their parent component. In my particular use-case I am allowing the developer to build pages of a wizard containing whatever component they need -- I then assume that they have a class or interface on them that they share so that I can call functions on them like, say, <code class="notranslate">validate</code> so I can move forward in the wizard.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;wizard&gt;
    &lt;page&gt;
        &lt;component1&gt;&lt;/component1&gt;
    &lt;/page&gt;
    &lt;page&gt;
        &lt;component2&gt;&lt;/component2&gt;
    &lt;/page&gt;
&lt;/wizard&gt;"><pre class="notranslate"><code class="notranslate">&lt;wizard&gt;
    &lt;page&gt;
        &lt;component1&gt;&lt;/component1&gt;
    &lt;/page&gt;
    &lt;page&gt;
        &lt;component2&gt;&lt;/component2&gt;
    &lt;/page&gt;
&lt;/wizard&gt;
</code></pre></div>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10, Angular 2.0.1, WebStorm, Webpack/Gulp</p>
<p dir="auto"><strong>Additional Notes</strong><br>
A workaround currently is instead to pass the components in as a config (say an array of components) and then refer to them that way. However it would be nice to be able to reference the instances of the components injected dynamically via ng-content</p>
<p dir="auto">I would also think that this may be related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="154128120" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/8580" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/8580/hovercard" href="https://github.com/angular/angular/issues/8580">#8580</a> in the sense that I would expect these two scenarios to work the same. The linked issues mentions that super class selectors should work (at least when the components aren't dynamically defined).</p>
<h2 dir="auto">I'm submitting a...</h2>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or 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">
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or 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>
<h2 dir="auto">Current behavior</h2>
<p dir="auto">If i have <code class="notranslate">InjectionToken</code> i cant assign it to <code class="notranslate">ViewChildren</code> or <code class="notranslate">ContentChildren</code> as mentioned in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="187847674" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/12758" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/12758/hovercard" href="https://github.com/angular/angular/issues/12758">#12758</a> Maybe due to changes of Typescript.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">This code is working if you type it to <code class="notranslate">&lt;any&gt;</code> but without it cant be compiled using typescript.</p>
<h2 dir="auto">Minimal reproduction of the problem with instructions</h2>
<p dir="auto">This will not compile :).</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const SomeClassToken = new InjectionToken&lt;SomeClass&gt;('SomeClassToken');

export class TestClass
{
    @ViewChildren(SomeClassToken)
    public children: QueryList&lt;SomeClass&gt;;
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-smi">SomeClassToken</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">InjectionToken</span><span class="pl-kos">&lt;</span><span class="pl-smi">SomeClass</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-s">'SomeClassToken'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">TestClass</span>
<span class="pl-kos">{</span>
    @<span class="pl-smi">ViewChildren</span><span class="pl-kos">(</span><span class="pl-smi">SomeClassToken</span><span class="pl-kos">)</span>
    <span class="pl-k">public</span> <span class="pl-c1">children</span>: <span class="pl-smi">QueryList</span><span class="pl-kos">&lt;</span><span class="pl-smi">SomeClass</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">What is the motivation / use case for changing the behavior?</h2>
<p dir="auto">It should compile, because it works if typed to <code class="notranslate">&lt;any&gt;</code>.</p>
<h2 dir="auto">Environment</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
Angular version: 5.1.2


Browser:
During compilation
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Typescript version: 2.5.3
- Node version: 8.1.2  
- Platform:  Windows 

Others:
"><pre class="notranslate"><code class="notranslate">
Angular version: 5.1.2


Browser:
During compilation
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Typescript version: 2.5.3
- Node version: 8.1.2  
- Platform:  Windows 

Others:

</code></pre></div>