title: ViewChildren not finding Dynamic Components
body: <p>A parent component that contains a @ViewChildren is not returning results for components that are created dynamically.</p>
  
  <p>The container component contains a <code>highlight</code> directive, and the dynamically generated component contains a <code>highlight</code> directive within it's template.  When queried with <code>@ViewChildren</code> the query length returns <strong>1</strong>.  The expected result is <strong>2</strong>.</p>
  
  <p>As you can see from the HTML there are definitely two highlight directives on the DOM.</p>
  
  <pre><code>&lt;container-component&gt;
      &lt;div&gt;&lt;/div&gt;
       &lt;dynamic-component ng-version="4.0.0"&gt;
          &lt;div highlight="" style="background-color: yellow;"&gt;Dynamic!&lt;/div&gt;
       &lt;/dynamic-component&gt;
       &lt;div highlight="" style="background-color: yellow;"&gt;Number of Highlights 
          &lt;div&gt;&lt;/div&gt;
       &lt;/div&gt;
  &lt;/container-component&gt;
  </code></pre>
  
  <p>Am I missing something?</p>
  
  <p><a href="https://plnkr.co/edit/LilvHJgFjPHnPuaNIKir?p=preview" rel="noreferrer">https://plnkr.co/edit/LilvHJgFjPHnPuaNIKir?p=preview</a></p>
  
  <p><strong>Container Component</strong></p>
  
  <pre><code>@Component({
    selector: 'container-component',
    template: `
      &lt;div #contentProjection&gt;&lt;/div&gt;
      &lt;div highlight&gt;Number of Highlights {{highlightCount}}&lt;div&gt;
    `,
  })
  export class ContainerComponent implements OnInit, AfterViewInit {
    @ViewChildren(HighlightDirective) private highlights: QueryList&lt;HighlightDirective&gt;;
    @ViewChild('contentProjection', { read: ViewContainerRef }) private contentProjection: ViewContainerRef;
  
    constructor(
      private resolver: ComponentFactoryResolver
      ) {
    }
  
    ngOnInit() {
      this.createDynamicComponent();
    }
  
    ngAfterViewInit() {
      console.log(this.highlights.length);
  
      // Should update with any DOM changes
      this.highlights.changes.subscribe(x =&gt; {
        console.log(this.highlights.length);
      });
    }
  
    private createDynamicComponent(){
      const componentFactory = this.resolver.resolveComponentFactory(DynamicComponent);
      this.contentProjection.createComponent(componentFactory);
  
    }
  }
  </code></pre>
  
  <p><strong>Dynamic Component</strong></p>
  
  <pre><code> @Component({
        selector: 'dynamic-component',
        template: `
          &lt;div highlight&gt;Dynamic!&lt;/div&gt;
        `,
      })
      export class DynamicComponent {
      }
  </code></pre>
  
  <p><strong>Highlight Directive</strong></p>
  
  <pre><code> @Directive({
        selector: '[highlight]'
      })
      export class HighlightDirective {
        constructor(private elementRef: ElementRef) {
           elementRef.nativeElement.style.backgroundColor = 'yellow';
        }
      }
  </code></pre>