Difficulty in binding large amounts of data with Angular causing Internet Explorer to become unresponsive

Whenever I try to bind the response of my service to a component variable, which contains more than 7000 records, my screen freezes and becomes unresponsive. This issue seems to occur only on Internet Explorer. Additionally, there are 3 dropdowns in the UI causing similar problems. I attempted using a resolver, but unfortunately, it did not resolve the issue as the screen still becomes unresponsive after the service call is completed.

Component.ts

this._myservice.getData(this.param1).subscribe(response => {this.Capabilities = response.json()});

Component.html

<ul class="dropdown-menu">
    <li *ngFor="let capability of Capabilities; trackBy: capability?.Name" id="{{capability.Id}}">

        <a href="javascript:void(0);" id="{{capability.Id}}">{{capability.Name}}</a>
        
    </li>
</ul>

Answer №1

Wow, a whopping 7000 records! That's definitely a large number of records to deal with. Your code seems to be adding all the records to the DOM at once:

<li *ngFor="let capability of Capabilities;trackBy:capability?.Name" id="{{capability.Id}}">

As a result, your browser will try to display all 7000 items in one go, leading to high memory consumption.

For such a large amount of records, it would be more efficient to implement "virtual scrolling." You can learn more about it here: https://material.angular.io/cdk/scrolling/overview

Check out this helpful guide as well: https://medium.com/front-end-weekly/how-to-use-virtual-scrolling-using-angular-7-cdk-9802110111fa

Here's a demo you can explore: https://stackblitz.com/edit/angular-cdk-demo-virtual-scroll?file=app%2Fapp.component.html

=> Take a look by pressing F12 in the demo, and you'll notice that only a few elements are displayed at a time for improved performance in app-virtual-scroll.

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

Guidance on showcasing the current day's weekday name through TypeScript

I am perplexed about how to begin in TypeScript after successfully setting up the display using gate. ...

What is the best way to create an "ArraySimilar" class using TypeScript?

Can someone guide me on creating an ArrayLike class in TypeScript? Edit: Got the solution from @jcalz, it's working perfectly for me. class CustomArray<T> implements ArrayLike<T> { length: number [index: number]: T } ...

What is the solution for combining multiple String Literal union types?

I'm dealing with two distinct types of string literals: type X = { type: "A1", value: number } | { type: "A2", value: string }; type Y = { type: "A1", test: (value: number) => void; } | { type: "A2", test: (valu ...

How do I increment my variable with each iteration in a forEach loop in TypeScript?

I'm working on a function with a forEach loop and I need to keep track of how many times the loop is executed. Can anyone suggest a way to tweak my logic to achieve this? Below is what I have tried so far: createUIListElements(){ xml2js.parseStri ...

Angular Typescript error: Trying to assign a value to 'someProperty' property of an undefined object

Within my Article class, I have a property called Image which is structured like this: export class Article { public image:Image; public images: Image[]; } If I decide to comment out this.article.image = new Image(); in the following way: constru ...

Issue with setting value using setState in TypeScript - what's the problem?

Every time I attempt to update the value of currentRole, it appears highlighted in red. Here is a screenshot for reference: const Container: React.FC<ContainerProps> = ({ children }) => { const [role, setRole] = useState<string>(); useE ...

Method for implementing mock values with observables in Angular

I have successfully implemented the following code to call an API. However, I now want to return a true value instead of calling the API. Strangely, when I try to return true, an error is thrown. export interface EmployeeStatus{ hasActive: boolean; } ...

What methods can be used to resolve errors stemming from nesting classes within classes in TypeScript?

My experience with TypeScript is limited, and I'm facing an issue. The code appears as follows: 1) Main.ts: import gpbApi from '@/utils/api/gpbApi'; @Component export default class ExtendedDetailAccountComponent extends mixins(CurrentUserM ...

extracting particular data from an Angular 6 observable

As I work with Angular 6, I have a scenario where I am making an API call using an interface. Here's how it looks: Service: getEmployees(): Observable<Employees[]> { return this.http.get<Employees[]>(this.getEmployeesAPI); } W ...

Issue: Module './App' not found in webpackSolution: Check if the module path is

I've decided to switch my .js files to .tsx in order to start using TypeScript. To incorporate TypeScript, I used the following command: yarn add typescript @types/node @types/react @types/react-dom @types/jest and began converting first index.tsx fo ...

Redirect unmatched URLs to index.html in Django for Angular app

Currently, I have set up a django server along with an angular app. When I launch the angular app and navigate through different sections using the links provided within the app, everything works smoothly. However, if I try to directly access a specific s ...

Discover the effective method in Angular to display a solitary password validation message while dealing with numerous ones

Here is the pattern we use to validate input fields: The length of the input field should be between 6 and 15 characters. It should contain at least one lowercase letter (a-z). It should contain at least one uppercase letter (A-Z). It should contain at le ...

Navigational dropdown menu item vanishing upon hover

Utilizing bootstrap for my website, the main navigation employs dropdowns for secondary choices. I am encountering an issue in IE10 only (works fine everywhere else) where the dropdown menu is inconsistently accessible. Additionally, if you manage to acce ...

The default selection is not showing up on an Angular 8 reactive form

I'm having some trouble with my Angular 8 reactive form that uses Bootstrap 4. Even though I've set the 'selected' attribute for the default option in the select element, it still doesn't display. Each time I have to manually selec ...

Utilizing webassembly within my Angular application

After working on my project using Angular7, I am now interested in learning more about WebAssembly. Can someone guide me on how to transform my current web application into WebAssembly? ...

What is the process for authenticating and sending a click conversion to Google Ads using a service account and the REST API with TypeScript?

I have attempted to authenticate using this documentation and to send conversions via REST API using this REST endpoint due to the absence of a Typescript/Javascript Client Library. However, I am encountering authentication issues. Once resolved, I aim to ...

Designing a function declaration that filters out null values from a combined type

I've recently started the process of converting all my code to support strictNullChecks. I have a specific requirement for a function that I need to implement: function defaultValue<TUnionNull>(value: TUnionNull, default: TWithoutNull): TWithou ...

Tips for fixing a GET 404 (not found) error in a MEAN stack application

While working on a profile page, I encountered an error when trying to fetch user details of the logged-in user: GET http://localhost:3000/users/undefined 404 (Not Found) error_handler.js:54 EXCEPTION: Response with status: 404 Not Found for URL: http:// ...

Issue encountered when using createReducer/handleAction in Redux along with TypeScript and typesafe-actions: Invalid argument provided for Argument 1

I tried following the guide on typesafe-actions in order to set up a basic TypeScript/Redux project, but I'm encountering issues. Whenever I attempt to access the page, I keep getting this error message, Error: Argument 1 is invalid, it should be an ...

Ways to verify if a chosen dynamic form input satisfies specific requirements

I just started learning Angular and I'm struggling with the nested JSON logic. I am aiming to create a dynamic form and found inspiration from this helpful tutorial. My goal is to implement conditional fields that only display when a specific option ...