Tips on optimizing data processing for quicker display with ngFor

I am currently facing an issue with loading a JSON file containing 3500 data. The data appears very slowly on the view, causing the application to work sluggishly.

Below is a snippet of the JSON:

    export class Service {
        private items = new Array<Mjeket>(
            { "Emer": "Iliriana"},
            { "Emer": "Ada" },
            { "Emer": "Ada"},
            { "Emer": "Adela"},......{...})

   getallitems(): Array<Items> {
        return this.items;
    }
    }

In my component.ts file:

getall() {
    this.items = this.service.getallitems();
}

Within component.html:

 <StackLayout *ngFor="let item of items; let i = index;">
             <GridLayout columns="*,*,*" rows="auto" style="padding: 10%;">
                                <Label [text]="item.Emer" class="list-group-item-heading"
                                    style="width: 60%; font-size: 16px; text-align: left; color: black;"
                                    row="0" col='0' horizontalAlignment="left"></Label>                 
                         </GridLayout>
                </StackLayout>

I am seeking suggestions on how to optimize the data loading process to ensure faster performance, especially when dealing with a large amount of data. Any ideas would be greatly appreciated!

angulartypescriptnativescriptngfor

Answer №1

Instead of rendering all your data at once, consider rendering it on demand by scrolling.

An option to achieve this is using a virtual scroller. Some possible solutions include:

You may be able to find more options, these are just two that I have experience with.

The challenge lies in how browsers and the DOM handle large amounts of data. For big datasets, consider implementing methods such as virtual scrolling, pagination, or live scrolling.

If you are dealing with modifications to items in Angular and want to avoid unnecessary re-rendering, consider using TrackByFunction. This can prevent re-rendering of unchanged items in scenarios like adding new objects to an array with unique keys specified in the trackBy function.

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

Tips for creating an HTTP only cookie in NestJS

Currently, I am in the process of incorporating JWT authorization with both an accessToken and refreshToken. The requirement is to store these tokens in HTTP-only cookies. Despite attempting this code snippet, I have encountered an issue where the cookies ...

typescriptexpresscookiesjwtnestjs

The compatibility issue arises when using Material UI Portal with TypeScript, specifically with the 'children' property types

When rendering a component using Material-UI Portal that includes several Material UI buttons, the following code is used: <Portal container={this.myContainer}> <Button onClick={this.handleClick}>Do something</Button> //other but ...

typescriptmaterial-ui

Double Calling of Angular Subscription

I am currently working with a series of observables that operate in the following sequence: getStyles() --> getPrices() Whenever a config.id is present in the configs array, getStyles() retrieves a style Object for it. This style Object is then passed to ...

javascriptangulartypescriptobservable

Accessing an Array from a service method in Angular and passing it to my main component

Within my api-service.ts, I have an array that holds some data. public getData():Observable<any[]> { return Observable.toString[ObsResult]; } Now, in the main component, I am attempting to call the getData() method to render the data in ...

javascriptarraysangulartypescriptobservable

Remove all input fields within an HTML file using a TypeScript method implemented in an Angular 2 component

Within my Angular project, there are several input elements in the HTML file that are not enclosed within a form tag. I am looking to create a function in the TypeScript file that will clear all of these inputs. I attempted to utilize ViewChild, but it a ...

angulartypescript

event activated when the input file is prepared for utilization by the browser

Which event should be used in conjunction with <input type="file"> to receive notification when the browser is ready to use the selected file? Once the user clicks on <input type="file"> and selects a file, I want to utilize that file within t ...

angular

Why do selected items in Ionic 3 ion-option not get deselected even after reloading or reinitializing the array

HTML File: <ion-item class="inputpsection" *ngIf="showDeptsec"> <ion-label floating class="fontsize12">Department</ion-label> <ion-select (ionChange)="showDepartmentChosen($event)" multiple="true" formControlName=" ...

htmlangulartypescriptionic3

Manipulate values within an array when a checkbox is selected or deselected

I am developing an Angular application where I have created a checkbox that captures the change event and adds the checked value to an array. The issue I am facing is that even if the checkbox is unchecked, the object is still being added to the array. D ...

javascriptangulartypescriptcheckboxangular6

Is there a way to insert a record upon the user clicking on the Add Record button?

// Here is my Component code // I want to figure out how to add a new row to the table with fresh values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-uom', templateUrl: './uom.component.html ...

angularhtmlcss

The Angular Component utilizes the ng-template provided by its child component

I am currently facing an issue that involves the following code snippet in my HTML file: <form-section> <p>Hello</p> <form-section> <ng-template test-template> TEST </ng-template> ...

angulartypescriptng-template

How can we initiate an AJAX request in React when a button is clicked?

I'm fairly new to React and I'm experimenting with making an AJAX call triggered by a specific button click. This is how I am currently using the XMLHttpRequest method: getAssessment() { const data = this.data //some request data here co ...

javascriptajaxreactjstypescript

ngFor failing to properly update when new data is pushed

I am currently working on creating an array of reactive forms in Angular. Here is what I have set up: typesForms: FormGroup[] = []; In my HTML, I loop through this array like so: <form *ngFor="let type of typesForms; let i = index" [formGroup]="types ...

angularngforangular-reactive-forms

Deciphering key-value pairs that are separated by commas

I am looking to convert the following format: realm="https://api.digitalocean.com/v2/registry/auth",service="registry.digitalocean.com",scope="registry:catalog:*" Into this JSON object: { realm: "https://api.digitaloce ...

javascriptnode.jstypescript

Troubleshooting common issues while setting up React Native with TypeScript

After carefully following the steps outlined in this guide on configuring a React Native project using TypeScript: https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native, I encountered a total of fifteen errors from the ...

node.jsreactjstypescriptreact-nativenpm

When setting up Webpack with TypeScript, an error is encountered related to imports

Recently, I attempted to convert my Webpack configuration from JavaScript to TypeScript but encountered numerous difficulties in the process. To kick things off, I created a basic webpack configuration file with some parts missing. Here is how my webpack.c ...

typescriptwebpacktsconfigts-node

What is the best way to observe a method with multiple signature overloads in karma/jasmine?

I am using angular along with karma and jasmine for unit testing. One of the methods in my HttpService has multiple signatures like so: public sendRequest<T>(path: string, observable?: false): Promise<T>; public sendRequest<T>(path: ...

angularjasminekarma-jasmine

The functionality of CDK Drag Drop is not accurately adjusting the placement of images

I have implemented an image gallery and am working on rearranging the position of the images using the Drag & Drop cdk library. However, I am facing an issue where the swapping of images does not always occur correctly; sometimes when attempting to exchan ...

angulartypescriptangular-materialangular-cdkangular-cdk-drag-drop

Issue encountered with Mongoose: Error 404 occurs while attempting to delete an object from a collection

I've encountered a strange issue with a mongoose API that is supposed to remove an object from a collection. When I call the API and pass the ID as a parameter (I have verified that the ID exists), I receive a 404 response. Here's how I am call ...

node.jsangularmongodbmongoose

The npm start command is no longer functioning in Angular 5

When attempting to start angular 5 with npm, I encountered an error that reads: TypeError: callbacks[i] is not a function Can anyone shed some light on where this error might be coming from? It seemed to pop up out of the blue and I can't seem to ...

javascriptangularnpmangular5

Angular 6 form controls with reactive elements

Looking to create a simple homepage using Angular 6. One of the features will include tests for prime factorization and leap years, implemented with reactive forms for validation. However, I am facing an issue where I cannot execute both functions simultan ...

angularformsreactive