Закройте все угловые аккордеоны начальной загрузки в цикле ngFor

У меня есть ситуация, когда в цикле ngFor создается ряд ngb-аккордеонов, по одному для каждого элемента данных, помеченного как аккордеон:

       <span *ngFor = "let item of menu.items">
        <!-- accordion menus -->
        <ngb-accordion
          #pageAccordion = "ngbAccordion"
          *ngIf = "item.url === '#accordion'" //in the json, says this item is an accordion
          [activeIds] = "activePanel"
          [destroyOnHide] = "false"
        >

У компонента есть viewchild для этого аккордеона:

  @ViewChild('pageAccordion', { static: false })
  pageAccordion: NgbAccordion;

И я хочу свернуть все аккордеоны:

    this.pageAccordion.collapseAll();

Проблема в том, что он сворачивает только первый, созданный в цикле ngFor. Ни один другой не закрывается.

Как я могу настроить или перебрать все динамически созданные аккордеоны и вызвать их метод collapseAll?

Я использую Angular 8 и Angular Bootstrap 5.0.