'@ViewChildren is not getting all elements when using virtual slides in Swiper.js

I am using swiper.js with virtual slides in Angular 12. Initially, when loading the page the @ViewChildren decorator gets the references to the elements, which are available in the DOM. So the QueryList contains the references to only that components of the current, previous and next swiper-slide (because of virtualization). But I need the reference to all available slides.

Either, I need to refresh somehow the @ViewChildren every time when the slide is changed or I need a way to get all the component references at once. Is there a way to solve this?

@ViewChildren(forwardRef(() => SomeComponent)) someComponentList: QueryList<SomeComponent>;

...

public async slideDidChange() {
  const someComponentsArray = this.someComponentList.toArray();
  this.selectedComponent = someComponentsArray[this.swiperRef.realIndex];
}



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source