title: ViewChildren in dynamically rendered reactive form showing "undefined"
body: <p>I'm trying to figure out how to dynamically render a form, and then cycle through each of the elements using @ViewChildren. However, the query appears not to be finding anything as I'm getting a zero length array back in <code>ngAfterViewInit</code> at the bottom of the following code. (For reference, here's the Stackblitz: <a href="https://angular-4lqtap.stackblitz.io" rel="nofollow noreferrer">https://angular-4lqtap.stackblitz.io</a>). I've found several articles relating to this topic, but none have solved the issue I'm facing.</p>
  
  <pre><code>import { Directive, Component, Input, OnInit, AfterViewInit, AfterContentInit, ViewChild, ViewChildren, ContentChildren, QueryList } from '@angular/core';
  import {FormGroup, FormControl} from '@angular/forms';
  
  @Directive({selector: '[foo]'})
  export class IdVar {
    // TODO(issue/24571): remove '!'.
    @Input() idString !: string;
  }
  
  @Component({
    selector: 'hello',
    template: `&lt;h1&gt;Hello {{name}}!&lt;/h1&gt;
              &lt;form #myForm="ngForm" [formGroup]="form"&gt;
                &lt;ng-container *ngFor="let itm of testArr; let i = index"&gt; 
                {{i}}: &lt;input [foo] [id]="i" /&gt;
                &lt;foo [idString]="i"&gt;{{i}}:&amp;nbsp;&lt;/foo&gt;
                &lt;/ng-container&gt;
               &lt;/form&gt;`,
    styles: [`h1 { font-family: Lato; }`]
  })
  export class HelloComponent implements OnInit, AfterViewInit  {
  
    @Input() name: string;
    form: FormGroup;
    formControls={};
    testArr = ["a", "b", "c"];
    @ViewChildren('foo') id: QueryList&lt;IdVar&gt;; 
  
  
    ngOnInit() {
      this.form = new FormGroup(this.formControls);
      this.testArr.forEach((itm)=&gt;{
        this.formControls[itm] = new FormControl(itm);
        this.form.addControl(itm, this.formControls[itm]);
      })
    }
  
    ngAfterViewInit() {
      setTimeout(()=&gt;console.log(this.id.length),1000);
    }
  
  }
  
  </code></pre>
  
  <p>Any idea what I'm doing wrong? Any solutions or workarounds? Tks!</p>
  
  <p>NEW ADDITION BELOW (got rid of earlier "undefined" error): </p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
  import { AppComponent } from './app.component';
  import { HelloComponent } from './hello.component';
  
  @NgModule({
    imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],
    declarations: [ AppComponent, HelloComponent ],
    bootstrap:    [ AppComponent ],
    schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
  })
  export class AppModule { }
  </code></pre>