title: FormArray and other arrays of child Component (@ViewChildren) are empty
body: <p>I have <code>@ViewChildren</code> child Component(<code>BookFormComponent</code>) inside a parent component(<code>LibraryComponent</code>). In my parent component I make a service call to get one <code>BookData</code> object.</p>
  <p>I give the DookData object to a method of the child component <code>initBookData(...)</code>. I want the child component to use the BookData to initialize its form controls. The BookData has an attribute <code>selectedTypes</code> which contains an array of books the user has already selected. I use the array to  check its checkboxes.</p>
  <p>There are 10 checkboxes and for instance if a user has 5 elements in the <code>selectedTypes</code> array then those 5 elements has to be checked out of the 10 checkboxes when the view is displayed.</p>
  <p>The issue am having now is the form controls for <code>name</code> and <code>color</code> are initialized with the values from the <code>BookData</code> object but the checkboxes are not checked(selected) when the view is displayed. I did console.log()'s inside <code>initSelectedTypes(....)</code> of the child component and the lengths of the arrays are 0's meanwhile the child component uses the same arrays to display the checkboxes in the UI but when it has to use the same array to check(select) some of the checkboxes then the lengths are 0's.</p>
  <p>My understanding is that the <code>&lt;book-form #book&gt;&lt;/book-form&gt;</code> in the parent component UI is the same as the attribute <code>@ViewChildren(BookFormComponent) book: QueryList&lt;BookFormComponent&gt;;</code> in the component class. So since the view is displayed then when I call a method on the attribute (book) then I expect all attributes of (book) to be initialized as well. I don't expect the arrays to be empty. All checkboxes are displayed correctly in the view but when I call <code>initBookData(...)</code> the arrays are empty.</p>
  <p>I am using @ViewChildren because I tried @ViewChild and I was getting &quot;undefined&quot; (so could not even call the child's methods)</p>
  <p>(I have omitted certain things in the code snippet to conserve space):</p>
  <pre><code>interface BookData {
     name?: string,
     color?: string,
     selectedTypes?: Array&lt;string&gt; // this array contains the types a user has selected already
  }
  
  
  
  // PARENT COMPONENT CLASS
  class LibraryComponent implements AfterViewInit, {
      @ViewChildren(BookFormComponent) book: QueryList&lt;BookFormComponent&gt;;
  
      // ADDITIONAL CHILDREN FOR OTHER mat-step omitted for clarity
  
     bookData: BookData = {}
  
   ngAfterViewInit(): void {
  
     this.getBookData();
  
       this.book.changes.subscribe((algemen: QueryList&lt;BookFormComponent&gt;) =&gt; {
        book.first.initBookData(this.bookData);
      });
   }
  
  // this method returns one book from the server and assigns it to &quot;this.bookData&quot;
  getBookData() {
    bookdataService.getBookData().subscribe(book =&gt; {
       this.bookData = book;
  });
  }
  
  }
  
  
  
  
  //  PARENT COMPONENT UI
  &lt;mat-horizontal-stepper #stepper linear&gt;
  
   &lt;mat-step [stepControl]=&quot;book.bookForm&quot;&gt;
         &lt;ng-template matStepLabel&gt;Book&lt;/ng-template&gt;
         &lt;book-form #book&gt;&lt;/book-form&gt;
   &lt;/mat-step&gt;
  
   &lt;mat-step&gt;
  // ADDITIONAL STEPS ARE OMITTED FOR CLARITY
   &lt;/mat-step&gt;
  &lt;/mat-horizontbal-stepper&gt;
  
  
  
  
  // CHILD COMPONENT CLASS
  Component({
    selector: 'book-form'
  })
  class BookFormComponent {
  
     bookForm: FormGroup;
     name = new FormControl('');
     color = new FormControl('');
     // Checkboxes for types of books a user can select. user can select multiple checkboxes
     types = new FormArray([]); 
  
     optionsTypes = [];
  
     ngOnInit(): void {
        this.bookForm = this.fb.group({
          name: this.name,
          color: this.color
         });
         
        this.initializeTypesCheckboxes();
     }
  
    //  This function will create 10 checkboxes that a user can select multiple of them
    private initializeTypesCheckboxes() {
      this.bookservice.getTypeOptions().subscribe(results =&gt; {
       
        // the results from the server is array of strings of 10 elements
        //  eg: [&quot;Maths&quot;, &quot;English&quot;, &quot;Chemistry&quot;, ...]
        this.optionsTypes = results; 
  
        // we create checkboxes based on the number of types we get from the server
        const typeCheckboxes = this.optionsTypes.map(t =&gt; new FormControl(false));
  
       // we push the the checkboxes to the &quot;this.types&quot; form array
        typeCheckboxes.forEach(type =&gt; this.types.push(type));
      });
    }
  
  
  // This method is called from the parent component
   public initBookData(bookData: BookData) {
     this.naam.setValue(bookData.naam);
     this.color.setValue(bookData.color);
     this.initSelectedTypes(this.types, this.optionsTypes, bookData.selectedTypes);
   }
  
  // this method will use the already &quot;alreadySelectedTypes&quot; array to pre-select some of the checkboxes.
   private initSelectedTypes(formArray: FormArray, optionsTypes: Array&lt;string&gt;, alreadySelectedTypes: Array&lt;string&gt;) {
      for (let i = 0; i &lt; formArray.controls.length; i++) {
        for (const type of alreadySelectedTypes) {
          if (optionsTypes  === type) {
            formArray.controls[i].patchValue(true);
          }
        }
      }
    console.log(&quot;LENGTH-formArray:&quot;, formArray.length); // i get O
    console.log(&quot;LENGTH-optionsTypes:&quot;, optionsTypes.length); // i get O
   }
    
  
  }
  </code></pre>
  <p>What am I doing wrong?</p>