Step-by-step guide on implementing virtual scroll feature with ngFor Directive in Ionic 2

I am working on a project where I need to repeat a card multiple times using ngFor. Since the number of cards will vary each time the page loads, I want to use virtual scrolling to handle any potential overflow. However, I have been struggling to get it to work properly. Here is my latest attempt:

<ion-content id="content">

   <ion-card id="card" *ngFor="let event of listOfEvents 
     [virtualScroll]="listOfEvents" >
          
          <ion-item *virtualItem="let event">

       <ion-row>

                <ion-col><span class="showDetails">Guests Needed:</span> {{event.guests}} </ion-col><ion-col><span class="showDetails">Cover:</span> {{event.coverCharge}}</ion-col><ion-col><span class="showDetails">Drink Min:</span>{{event.drinkMin}} </ion-col>

        </ion-row>

            </ion-item>

         </ion-card>

    </ion-content>
javascriptangulartypescriptionic2

Answer №1

There is no need to utilize ngFor when using [virtualScroll]. The latter takes care of the iteration process.

I suggest exploring the use of ng-template for implementing virtual scroll functionality.

<ion-content id="content">

 <ng-template [virtualScroll]="listOfEvents">
   <ion-card id="card" *virtualItem="let event" >          
       <ion-row>
          <ion-col><span class="showDetails">Guests Needed:</span> {{event.guests}} </ion-col>
          <ion-col><span class="showDetails">Cover:</span> {{event.coverCharge}}</ion-col>
          <ion-col><span class="showDetails">Drink Min:</span>{{event.drinkMin}} </ion-col>
        </ion-row> 
    </ion-card>
 </ng-template> 
</ion-content>

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

Route.get() function is expecting a callback function, but instead received a string object

Having searched through similar posts, I am unsure and lack the experience to apply the suggested resolutions to my project. I recently built a basic app with two main routes as part of a Udemy course, but I am struggling with the following error: "Route.g ...

javascriptexpress

Learn how to smooth out a path in d3.js before removing it during the exit transition

Description: My interactive multiple line chart allows users to filter which lines are displayed, resulting in lines entering and exiting dynamically. Desired effect: I aim to smoothly transition a line to align perfectly with the x-axis before it disappe ...

javascriptd3.js

Encountered an issue while trying to update a ServiceWorker for scope - Received a HTTP error

I encountered a puzzling issue with my Vue PWA app, as our error logs are flooded with instances of a particular user experiencing an error that myself and another person cannot reproduce. Failed to update a ServiceWorker for scope ('https://myapp.com ...

javascriptvue.jsservice-worker

Click the button to automatically insert the current time

Hello, I am new to scripting and seeking some guidance. I have a code that retrieves the current time and sends it to a MySQL database when a button is clicked. <form action="includes/data_input.inc.php" method="POST"> <!-- button - Start ...

javascriptphphtml

Obtain the count of unique key-value pairs represented in an object

I received this response from the server: https://i.stack.imgur.com/TvpTP.png My goal is to obtain the unique key along with its occurrence count in the following format: 0:{"name":"physics 1","count":2} 1:{"name":"chem 1","count":6} I have already rev ...

javascriptangulartypescript

Is it possible to remotely adjust JavaScript configurations on the client's side using JSON?

I have integrated my library into the client's website and need to set it up by providing a remote JSON file specific to the client's ID. What would be the most effective method for achieving this? Using ajax directly may not be ideal as we need ...

javascriptjson

Cannot find JS variable after loop has completed

I am struggling to understand why the value of my variable is not changing in my function. Here is my code snippet: var count = function(datain){ let temparr = [], countobj = {}; $.each(datain, function(key, val) { console.log(temparr); cou ...

javascriptjqueryajaxloops

Tips on personalizing the default html template in nuxt

Struggling to customize the default page from my Nuxt app due to limited documentation. Link to Documentation I'm interested in extracting only certain elements like the title or links in the head section. For example, how can I access just the li ...

javascripthtmlvue.jsnuxt.js

Enhance the display in Angular2

Just started working with Angular 2 and I've encountered a problem. I have an API that loads a JavaScript file in my project. The issue is, I need to use this JS file and cannot modify it. Essentially, this JS file has some methods that make AJAX call ...

javascriptjqueryajaxangular

I am unable to align the image in the center, what could be causing it not to center properly?

Why does my code center in mobile view but not in Desktop? How can I solve this issue? I have tried using display: block; margin: auto; width:100%; and text-align: center;, but it did not work. let $slides, interval, $selectors, $btns, currentIndex, ne ...

javascripthtmljquerycsscentering

Vuex getters not displaying expected values in computed properties until entire page has finished loading

When working with computed properties using data fetched by the mapGetters function in my Vuex store, I always encounter the issue of getting an undefined value until the entire page or DOM is fully loaded. For instance, I have an example of an isRegister ...

javascriptvue.jsvuex

Using Unicode JSON in Laravel blade to pass data to React components, encountering an issue with JSON parsing

I currently have a JSON object stored in the database: { "ui": {}, "title": "Hola mundo 2", "values": {}, "properties": {}, "description": "descripcion" } Within the Laravel controller, ...

javascriptphpreactjsjsonlaravel

Add new data to an existing array in Angular 7 without overwriting it

After clicking a button, I'm retrieving data from the WordPress API: <a (click)="initGetComments()">Get comments</a> This is the code snippet: export class AppComponent { commentsResults: CommentsItem[] = []; ...

javascriptarraysgetangular7

Step-by-step guide to making a personalized mesh in Babylon.js

Currently, I am utilizing the Babylonjs 3D WebGL library and finding it to be a fantastic tool. However, I am facing a challenge in replicating a feature that exists in the THREE.JS library. My scenario involves 2D polygons stored in a database. I retriev ...

javascript3dthree.jsbabylonjs

Proceed with executing the function only if the current date is before the specified date

I've created a countdown timer that can count both up and down from a given date. However, I want the countdown to only run in reverse and stop once it reaches the current date or any future dates. Currently, the alert message shows when the date is r ...

javascriptjquerycountdowncountdowntimer

Verify the presence of a specific value within an array of objects in JavaScript that was retrieved from an AJAX response, and then

I am encountering an issue with the code below where I am unable to filter entry.AllLinks. The code snippet is shown here: $.ajax({ url: url, type: "get", headers: {"Accept": "application/json;odata=verbose"}, success: function (data) { ...

javascriptjqueryarraysajax

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Hello everyone, I am attempting to customize the label text color of a radio button to turn blue when selected. https://i.stack.imgur.com/btSc2.jpg HERE IS THE CODE FOR MY MUI BUTTON SO FAR import * as React from "react"; import Radio from &quo ...

javascriptcssreactjstypescriptmaterial-ui

What could be causing the "keyframes method" in my css to not function correctly?

When working on the keyframes section, my computer seems to be having trouble recognizing the from part. Ideally, it should display in blue with the opacity command appearing in grey. Unfortunately, neither of these styles are appearing correctly and I&apo ...

javascripthtmlcsscss-animations

The message sent back by Django Rest Framework is: "a legitimate integer must be provided"

I have integrated a react form within my Django application, supported by the rest framework in the backend. When I submit the form without entering any value in the integer field, I encounter the following error message from the rest API: "a valid integer ...

javascriptreactjsdjangodjango-rest-framework

A new value was replaced when assigning a JSON value inside a loop

Is there a way to generate a structure similar to this? { "drink": { "2": { "name": "coke", "type": "drink" }, "3": { "name": "coke", "type": "drink" } }, "food": ...

javascriptjqueryjson