Angular 8 Длина ViewChildren равна 0 после представления init

Question

Я пытаюсь создать компонент, в котором есть дочерние компоненты. И я хотел бы иметь некоторый контроль над детьми. мой «родитель» выглядит так:

import {
  Component,
  ViewChildren,
  AfterViewInit,
  QueryList
} from "@angular/core";
import { StepComponent } from "./step.component";

@Component({
  selector: "app-stepper",
  templateUrl: "./stepper.component.html",
  styleUrls: ["./stepper.component.scss"]
})
export class StepperComponent implements AfterViewInit {
  @ViewChildren(StepComponent) children: QueryList<any>;

  constructor() {}

  ngAfterViewInit() {
    console.log(this.children);
    this.children.forEach(step => console.log(step));
  }

  previous() {
    console.log("previous");
  }

  next() {
    console.log("next");
  }
}

, а Html выглядит так:

<ng-content id="accordion">
</ng-content>

Как видите, я хочу получить детей после того, как представление инициализируется. Мои дети просто выглядят так:

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <button class="btn btn-link"
                (click)='animateMe()'>
                {{name}}
            </button>
        </h5>
    </div>
</div>
<div [@myfirstanimation]='state'>
    <ng-content class="card-body">
    </ng-content>
</div>

И код такой:

import { Component, OnInit, Input } from "@angular/core";
import {
  trigger,
  state,
  style,
  transition,
  animate
} from "@angular/animations";

@Component({
  selector: "app-step",
  templateUrl: "./step.component.html",
  styleUrls: ["./step.component.scss"],
  animations: [
    trigger("myfirstanimation", [
      state(
        "small",
        style({
          height: "0px"
        })
      ),
      state(
        "large",
        style({
          height: "100px"
        })
      ),
      transition("small <=> large", animate("400ms ease-in"))
    ])
  ]
})
export class StepComponent implements OnInit {
  @Input() name: string;
  @Input() state: string = "small";

  constructor() {}

  ngOnInit() {}

  animateMe() {
    this.state = this.state === "small" ? "large" : "small";
  }
}

Я использовал это в таком компоненте, как это:

<app-stepper #stepper
    *ngIf="!currentUser">
    <app-step name="Upload screenshot(s)">
        <form>
            <div class="form-group">
                <label>Youtube link</label>
                <input class="form-control-file"
                    type="file"
                    multiple
                    accept=".jpg,.png" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary"
                    type="submit"
                    (click)="uploadAndSubmit()">Submit</button>
            </div>
        </form>
    </app-step>
    <app-step name="Use image Url">
        <form>
            <div class="form-group">
                <label>Image link</label>
                <input class="form-control"
                    placeholder="Paste your YouTube link here." />
            </div>
        </form>
        <div class="form-group">
            <button class="btn btn-primary"
                type="submit"
                (click)="submit()">Submit</button>
        </div>
    </app-step>
</app-stepper>

Итак, теоретически, дочерние элементы должны быть разрешены, и в моем stepper.component должна быть нажата строка console.log(step), но это не так, и console.log(this.children) показывает длину 0.

Кто-нибудь знает, что я делаю не так?