I'm currently facing an issue with integrating virtual scroll into my Ionic 4 + Angular project.
Previously, I relied on Ionic's implementation of virtual scroll (ion-virtual-scroll) which worked well initially. However, I encountered a major drawback when it came to supporting Ionic's grid view, which is essential for my app. (Ionic has acknowledged this limitation in their repository under 'Feature requests': https://github.com/ionic-team/ionic/issues/16632)
In the interim, I decided to use ngx-virtual-scroller (https://github.com/rintoj/ngx-virtual-scroller) as it offers multi-column support.
However, I'm encountering difficulties while implementing it in my project.
I installed it via npm (npm install ngx-virtual-scroller --save) and imported the VirtualScrollerModule in my app.module
app.module.ts
import { VirtualScrollerModule } from 'ngx-virtual-scroller'
imports: [
...
VirtualScrollerModule
],
I wrapped the virtual-scroller tag around the elements in my component's view
product-card-view.component.html
<virtual-scroller #scroll [items]="productsArray">
<div *ngIf="columnViewActive; else listView">
<ion-row>
<ion-col size="6" *ngFor="let p of scroll.viewPortItems">
<ion-card>
<ion-card-header>
<a class="productTitleColumn" title="{{ p.title }}" href="{{ p.link }}">{{ p.title }}</a>
</ion-card-header>
<ion-card-content>
..... ETC .....
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</div>
</virtual-scroller>
But I'm running into this error
Error in console
core.js:9110 ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'items' since it isn't a known property of 'virtual-scroller'. 1. If 'virtual-scroller' is an Angular component and it has 'items' input, then verify that it is part of this module. 2. If 'virtual-scroller' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
After researching a solution, I came across someone who faced a similar issue with Ionic 3 (https://github.com/rintoj/ngx-virtual-scroller/issues/85) and found that importing the VirtualScrollMoudle into the child module where it's used rather than in the global app module might be the key, hinting at possible conflicts with lazy-loading components.
I tried this approach without success. I attempted importing the VirtualScrollMoudle only in app.module.ts, only in the parent page module of the component using virtual-scroller, and in both simultaneously, but encountered the same issue.
home.module.ts
import { VirtualScrollerModule } from 'ngx-virtual-scroller'
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
]),
FontAwesomeModule,
ProductSharedModule,
HeaderFooterSharedModule,
HideHeaderSharedModule,
VirtualScrollerModule
],
declarations: [HomePage]
})
export class HomePageModule { }
I made sure that the import statements are at the bottom, as I've seen many people make this mistake (myself included).
Is there a solution or am I overlooking something obvious?
Versions:
Ionic 4 (5.4.4)
Angular: 8.1.3