title: Get children using viewChildren with nested directives
body: <p>I am trying to implement some features in my angular application. I have created a parent directive <code>appParent</code> and two other directives <code>appChildAbc</code> and <code>appChildXyz</code>.</p>
  
  <p>What I want to do is that whenever I have the <code>appParent</code> directive applied on an element, I want to check for its child elements (native HTML elements in the same component) and apply some logic to these child elements.</p>
  
  <p>After much search and struggle I have found a way to do it using the <code>ViewContainerRef</code> in <code>ParentDirective</code> and <code>@ViewChildren</code> in <code>AppComponent</code>, but I had to use <code>((this.viewContainerRef as any)._view.nodes)</code>, which does not look like the right way to do it.</p>
  
  <p>Is there any other way to get the reference of <code>Child Elements</code> in the parent directive ??</p>
  
  <p>Sample stackblitz  <a href="https://stackblitz.com/edit/angular-nested-directive-ng" rel="nofollow noreferrer">here</a></p>
  
  <p>Feel free to fork the code and update as necessary. Thanks in advance</p>
  
  <h2>Parent Directive</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class ParentDirective {
    constructor(private vcr: ViewContainerRef) {}
  
    ngAfterViewInit() {
      console.log((this.vcr as any)._view.nodes);
      let lists = (this.vcr as any)._view.nodes.filter(
        x =&gt; x.constructor.name === "QueryList"
      );
      lists.forEach(list =&gt; {
        list.toArray().forEach(x =&gt; {
          if (x.constructor.name === "ChildXyzDirective")
            x.elementRef.nativeElement.style.background = "red";
          else x.elementRef.nativeElement.style.background = "green";
          console.log(x);
        });
      });
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <h2>App.component.ts</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class AppComponent  {
    name = 'Angular';
    @ViewChildren(ChildXyzDirective) xyzChildren: QueryList&lt;ChildXyzDirective&gt;;
    @ViewChildren(ChildAbcDirective) abcChildren: QueryList&lt;ChildAbcDirective&gt;;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <h2>App.component.html</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div appParent&gt;
    Parent div directive
    &lt;div appChildAbc&gt;
      Abc Child directive 1
    &lt;/div&gt;
    &lt;div appChildAbc&gt;
      Abc Child directive 2
    &lt;div appChildXyz&gt;
      Xyz Child directive 1
    &lt;/div&gt;
    &lt;div appChildXyz&gt;
      Xyz Child directive 2
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>