The 'items' property cannot be linked to 'virtual-scroller' as it is not a recognized attribute

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

angulartypescriptionic-frameworkvirtualscroll

Answer №1

UPDATE

Special thanks to @Reactgular for helping me solve the problem!

It turns out that because my product-card-view.component was located inside a shared module, I had to import the virtual scroll module within the shared module itself and not separately in app.module.ts or the parent page module.

product-shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { VirtualScrollerModule } from 'ngx-virtual-scroller';

// Product card component
import { ProductCardViewComponent } from '../../components/products/product-card-view/product-card-view.component';

@NgModule({
  declarations: [ProductCardViewComponent],
  imports: [CommonModule, IonicModule, FontAwesomeModule, VirtualScrollerModule],
  exports: [ProductCardViewComponent]
})
export class ProductSharedModule { }

I'm leaving this answer here hoping it can assist anyone facing a similar issue in the future.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

From a series of arrays filled with objects, transform into a single array of objects

Upon using my zip operator, I am receiving the following output: [ [Obj1, Obj2, ...], [Obj1, Obj2, ...] ]. To achieve my desired result, I am currently utilizing the code snippet below: map(x => [...x[0], ...x[1]]) I am curious to know if there exists ...

angularrxjsobservable

How is it possible for this for loop to function properly without the need to pass the incrementing variable

I managed to compile my code and it's working fine, but there's something interesting - the variable that should reference the incrementing value is not included as an argument in the for loop. var _loop2 = function _loop2() { var p = docume ...

javascripttypescriptfor-loop

Utilizing Angular Services to Share Events and Reusing Components Multiple Times on a Page

My unique custom table is made up of multiple components, each emitting events using a shared service called TableEvent. These events are subscribed to by a class named TableTemplate, which facilitates communication among the different components of the ta ...

angulartypescriptrxjs

Struggling with setting up eslint in my typescript project

Below is the contents of my package.json file: { "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.13.0", "@typescript-eslint/parser": "^5.13.0", "airbnb": "^0.0.2&qu ...

typescriptcypresseslint

The ordering of my styles and Material-UI styles is causing conflicts and overrides

Greetings fellow developers! I'm currently facing an issue with my custom styles created using makeStyles(...). The problem arises when I import my styles constant from another module, and the order of the style block is causing my styles to be overr ...

reactjstypescriptmaterial-uinext.js

The component does not contain the specified property

One Angular 4 component that I have is like this: export class MenuComponent { constructor(private menuService: MenuService) { } @Input(nodes):any; getMenu(path:string): void { this.menuService.getData(path).subscribe(data => { // Re ...

angulartypescript

Tips for displaying dynamic images using the combination of the base URL and file name in an *ngFor loop

I have a base URL which is http://www.example.com, and the file names are coming from an API stored in the dataSource array as shown below: [ { "bid": "2", "bnam": "ChickenChilli", "adds": "nsnnsnw, nnsnsnsn", "pdap": " ...

htmlangulartypescript

Use a function on values that have corresponding keys in a separate array

I am working with a form.value object that looks like this: form.value = { "to_date": "2019-03-21T05:00:00.000Z", "from_date": "2019-03-13T05:00:00.000Z", "is_form": "" "errors":"" } Additionally, I have an array called filterArray: filterArray ...

arraysangulartypescriptobjectangular-reactive-forms

Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

Can anyone help me modify Andris’ solution from this post: Convert seconds to days, hours, minutes and seconds to also include years, months, and weeks? I am currently running this code: getDateStrings() { console.log(req_creation_date); const toda ...

javascriptangulartypescript

Cypress: Importing line in commands.ts is triggering errors

After adding imports to the commands.ts file, running tests results in errors. However, in commands.ts: import 'cypress-localstorage-commands'; /* eslint-disable */ declare namespace Cypress { interface Chainable<Subject = any> { c ...

typescripttestingautomated-testscypress

Steer clear of using the non-null assertion operator while assigning object members

Looking for a practical method to assign object members to another object without using the non-null assertion operator "!". In the example below, consider that formData can be any JavaScript object. some.component.ts export class SomeComponent { someMo ...

angulartypescript

Passing dynamic values to nested components within an ngFor loop in Angular

I'm currently facing an issue with a child component inside a ngFor loop where I need to pass dynamic values. Here is what I have attempted so far, but it doesn't seem to be working as expected <div *ngFor="let item of clientOtherDetails& ...

angular

Exporting a constant as a default in TypeScript

We are currently developing a TypeScript library that will be published to our private NPM environment. The goal is for this library to be usable in TS, ES6, or ES5 projects. Let's call the npm package foo. The main file of the library serves as an e ...

typescripttypescript1.8typescript-typings

Are multiple click events needed for identical buttons?

In my component, there is an HTML structure like this: <div id="catalogo" class="container"> <div class="row"> <div *ngFor="let artista of artistas" class="col-sm" style="mar ...

angulartypescript

What are some methods for utilizing the "name" attribute within React components?

About My Coding Environment Utilizing TypeScript and ReactJS The Issue with Using name as an Attribute Encountering the following error: Type '{ name: string; "data-id": string; "data-type": string; }' is not assignable to ...

htmlcssreactjstypescript

Error in Node: JSON parse failure due to invalid token "'<'" and ""<!DOCTYPE ""

Every time I attempt to run node commands or create a new Angular project, I encounter the following error. Node version 20.11.0 NPM version 10.2.4 ...

javascripthtmlnode.jsangularnode-modules

Angular 2 release candidate 3 encounters issues with unfulfilled dependencies

Having encountered an issue with npm, specifically related to dependencies while using packages.json from the official Angular2 site's quick start guide. Yesterday everything was functioning correctly, but today I am facing difficulties as npm is unab ...

node.jsangularnpm

Retrieve information from Angular 2 response

In my code, I am working with 1 component and 1 service. Here is the component element : ... constructor(private requestService : RequestService) { } ngOnInit() { this.a = this.requestService.send_request(urlWebAPI); console.log(this.a); } ... ...

jsonangularpromiseresponse

When working with the Google Sheets API, an error occurred: "this.http.put(...).map is not a valid

Having difficulty with a straightforward request to the Google Sheets API using the PUT method. I followed the syntax for http.put, but an error keeps popping up: this.http.put(...).map is not a function. Here's my code snippet: return this.http ...

javascriptangulargoogle-sheets-api

Instructions for accessing the side menu upon navigating to a new page

I'm working on an Ionic4 app that integrates with Google Firestore and includes a login feature. My goal is to have the sidemenu automatically open whenever a user logs into the application. For example: Login > PageX > *Open Sidemenu. How can I achi ...

angularionic4