<p dir="auto">Hi!</p>
<p dir="auto"><strong>Short description:</strong><br>
If components are loaded into parent component by router ContentChildren doesn't track them.</p>
<p dir="auto">Here is <a href="https://plnkr.co/edit/MHKTnwdA2r8My9buca6d?p=preview" rel="nofollow">plunker</a><br>
<strong>Preconditions:</strong></p>
<ol dir="auto">
<li>There are container component and panel component (container component queries panel component)</li>
<li>App has one one container component and 3 panel components:<br>
a) panel1 present statically from the scratch<br>
b) panel2 is showed conditionally inside "div"<br>
c) panel3 is loaded via router outlet</li>
</ol>
<p dir="auto"><strong>STR:</strong></p>
<ol dir="auto">
<li>Open plunker and console</li>
<li>There will be the log in console like '&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; ngAfterContentInit ...' with array with one panel component of panel1</li>
<li>Click button to show panel2. Chages are detected and there will record like '&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; panels changed ...' in console with array of two panels</li>
<li>Finally click link to load panel3 via router =&gt; panel appears in DOM, but changes are not detected and we still have two panels in "panels" property</li>
</ol>
<p dir="auto">If this is an expected behaviour of ContentChildren with dynamic component loading then maybe there is some workaround to achieve my goal?</p>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="104148053" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/3922" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/3922/hovercard" href="https://github.com/angular/angular/issues/3922">#3922</a> contains the sentence <code class="notranslate">Both query mechanisms do not go into further into component subviews.</code>, but I would like that to be available.</p>
<p dir="auto">I have grouped a couple of <code class="notranslate">[router-link]</code> and want to decide in a parent element if any of those links <code class="notranslate">isRouteActive</code>. However, not all those links are built directly within the component, but some are built up dynamically by separate components (after doing a HTTP request). Right now, the <code class="notranslate">QueryList</code> remains empty and doesn't have any observable changes in those cases.</p>
<p dir="auto">Here is what I'm doing now</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Directive({
    selector: '[parent-is-route-active]',
    host: {'[class.router-link-active]': 'isRouteActive'}
})
export class ParentIsRouteActive implements AfterContentChecked {
    public isRouteActive: boolean;

    @ContentChildren(RouterLink, { descendants: true }) routerLinks: QueryList&lt;RouterLink&gt;;

    constructor(router: Router) {
        router.subscribe((x) =&gt; this.routeChanged(x));
    }

    public afterContentChecked() {
        ObservableWrapper.subscribe(this.routerLinks.changes, (_) =&gt; {
            console.log(&quot;change detected&quot;);
        });
    }

    private routeChanged(x: string) {
        var activeRoutes = this.routerLinks.filter(x=&gt; x.isRouteActive);
        this.isRouteActive = activeRoutes.length &gt; 0;
    }
}"><pre class="notranslate">@<span class="pl-smi">Directive</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'[parent-is-route-active]'</span><span class="pl-kos">,</span>
    <span class="pl-c1">host</span>: <span class="pl-kos">{</span><span class="pl-s">'[class.router-link-active]'</span>: <span class="pl-s">'isRouteActive'</span><span class="pl-kos">}</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">ParentIsRouteActive</span> <span class="pl-k">implements</span> <span class="pl-smi">AfterContentChecked</span> <span class="pl-kos">{</span>
    <span class="pl-k">public</span> <span class="pl-c1">isRouteActive</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span>

    @<span class="pl-smi">ContentChildren</span><span class="pl-kos">(</span><span class="pl-smi">RouterLink</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">descendants</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">routerLinks</span>: <span class="pl-smi">QueryList</span><span class="pl-kos">&lt;</span><span class="pl-smi">RouterLink</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>

    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">router</span>: <span class="pl-smi">Router</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">router</span><span class="pl-kos">.</span><span class="pl-en">subscribe</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">routeChanged</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">public</span> <span class="pl-en">afterContentChecked</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">ObservableWrapper</span><span class="pl-kos">.</span><span class="pl-en">subscribe</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">routerLinks</span><span class="pl-kos">.</span><span class="pl-c1">changes</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">_</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
            <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"change detected"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">private</span> <span class="pl-en">routeChanged</span><span class="pl-kos">(</span><span class="pl-s1">x</span>: <span class="pl-smi">string</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">var</span> <span class="pl-s1">activeRoutes</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">routerLinks</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-c1">=&gt;</span> <span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-c1">isRouteActive</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isRouteActive</span> <span class="pl-c1">=</span> <span class="pl-s1">activeRoutes</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>