Having trouble loading extensive amounts of data into a select element within an Angular application

Upon successfully retrieving around 14000 data entries from an HTTP request, I am facing difficulties loading this vast amount of data into my Select Tag. This is causing the entire page to slow down. The structure of the select Tag in question is as follows:

<ng-container *ngIf = "merchantTitle!=null">
            <select #merchantId="ngModel" class="form-control" name="merchantId" [(ngModel)]="clubDiscountContractReportModel.merchantId" style="margin-right: 28px;" (change)="onMerchantChange($event.target.value)">
              <option *ngFor="let merchant of merchantTitle" [value]="merchant.merchantId" [selected]="clubDiscountContractReportModel.merchantId == merchant.merchantId">
                {{ merchant.merchantTitle }}
              </option>
            </select>
          </ng-container>

Is there a potential issue with my Select Tag or any alternative methods to address the sluggish UI rendering caused by loading large amounts of data?

angulartypescripthttp

Answer №1

Dealing with 14000 data items may seem like a daunting task, especially when rendering them using an *ngFor. This can cause your page to slow down as all the items are loaded into the DOM at once. To address this issue, consider utilizing a virtual scrolling feature provided by many dropdown solutions. Virtual scrolling only loads the items that are currently visible on the screen, dynamically loading more of the 14000 items as you scroll through the list. This helps prevent overcrowding of the DOM and ensures smoother performance. If you need to implement virtual scrolling in a plain HTML select element, some research and experimentation will be necessary.

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

Is it possible for me to download npm locally using the command line? I am looking to install an older version of npm for a project that requires it

I currently have two Angular projects on my computer: The first project is built in Angular 14 and connected to Java. The installations of npm and ng are carried out using Maven plugins. Here is an example of the Maven plugins being called with configurat ...

node.jsangularnpm

Ionic causing delay in updating ngModel value in Angular 2

My ion-searchbar is set up like this: <ion-searchbar [(ngModel)]="searchQuery" (keyup.enter)="search();"></ion-searchbar> In the typescript file, the searchQuery variable is defined as follows: export class SearchPage { searchQuery: string ...

angularjstypescriptangularionic2

Enhance your Angular Material Table with split headers and sticky header capabilities

I am having an issue with the header of my Angular Material table. I need help adding a sticky header feature. I tried using sticky: true, but it's not working for my first column since I have hidden it. Additionally, the first row is displaying the ...

angularangular-materialmaterial-uimat-table

What steps can I take to fix the ESM / require error while using TypeScript 4.8?

My Node.js application uses TS 4.8, and I recently updated the file-type package. However, after the update, my project compilation fails with the following error: [1] const _fileType = /#PURE/ _interopRequireWildcard(require("file-type")); [1] ...

node.jstypescriptfile-typeswc

Retrieve the specific object's methods based on a specified return type criteria

Initially, I have a class containing attributes and methods. My goal is to filter and retrieve only the keys of the methods. I created a utility type for this purpose and it worked smoothly: type FunctionPropertyNames<T> = { [K in keyof T]: T[K] e ...

typescript

When making a variable call outside of a subscriber function, the returned value is 'undefined'

I find myself in a situation where I have to assign a value to a variable inside a subscriber function in Angular. The issue is that the variable returns 'undefined' when called outside of the Subscribe function. Here's what I'm encount ...

javascriptangulartypescriptangular-componentsangular9

Error: The property ɵfac cannot be redefined within angular

core.js:27478 Uncaught TypeError: Cannot redefine property: ɵfac at Function.defineProperty (<anonymous>) at addDirectiveFactoryDef (core.js:27478:1) at compileComponent (core.js:27361:1) at ɵ3$1 (core.js:27674:93) at TypeDecora ...

angular

Determine the accurate data type while iterating through a for loop

I am facing an issue where I have around 40 unique actions defined, all with the same parameters except for each being provided with a different schema which is causing the problem type ActionName = 'replaceText' | 'replaceImage'; type ...

typescriptfor-loopcastingtype-inference

Implement handleTextChange into React Native Elements custom search bar component

I need help with passing the handleTextChange function in the SearchBarCustom component. When I try to remove onChangeText={setValue} and add onchange={handleTextChange}, I am unable to type anything in the search bar. How can I successfully pass in the ...

javascripttypescriptreact-nativeexpo

After successfully installing @angular/localize, running npm update or npm install could result in a dependency error

I am looking to implement @angular/localize in my Angular application. Currently, I have a newly created NestJS backend integrated with an Angular frontend within an Nx monorepo. Upon attempting to install the package using npm install @angular/localize, ...

angularnpmnestjsnrwl-nxangular-localize

Fixing script type error when using web components with Angular on Nginx

Currently facing an issue while trying to serve my Angular 8 app with a basic Nginx server. Upon attempting to run the app, I encountered an error in Chrome that states: Failed to load module script: The server responded with a non-JavaScript MIME type ...

angularnginxecmascript-6server

Is it possible to identify unauthorized utilization of web APIs within TypeScript?

Recently, I encountered an issue while using the URLSearchParams.size in my code. To my surprise, it didn't work on Safari as expected. Checking MDN's browser compatibility table revealed that Safari version 16.6 does not support this feature, un ...

typescriptdomtypescross-browser

Bar chart in Chart.js becomes crowded and illegible on smaller screens due to overlapping bars

Hello there! I've encountered an issue where the bar chart overlaps when the screen width is too low. It seems to be related to the maintainAspectRatio property, which I set to false because I wanted the charts to shrink only in width, not in both axe ...

angulartypescriptchart.jsng2-charts

Quirky happenings in Typescript

TS Playground function foo(a: number, b: number) { return a + b; } type Foo1 = typeof foo extends (...args: unknown[]) => unknown ? true : false; // false type Foo2 = typeof foo extends (...args: any[]) => unknown ? true : false; // true What is ...

typescript

Enhance the Component Props definition of TypeScript 2.5.2 by creating a separate definition file for it

I recently downloaded a NPM package known as react-bootstrap-table along with its type definitions. Here is the link to react-bootstrap-table on NPM And here is the link to the type definitions However, I encountered an issue where the types are outdate ...

reactjstypescripttypescript2.0react-bootstrap-table

Could JOI be used to validate unidentified keys within nested data structures?

I've developed a middleware that uses Joi to validate incoming requests. export default (schema: any) => async (req: Request, res: Response, next: NextFunction) => { try { const validation = schema.validate(req, { abortEarly: false }) ...

javascriptnode.jstypescriptvalidationjoi

Tips for displaying or concealing a div using Angular Js

I have set up two div elements with a dropdown control in one named div1. I am looking to hide div2 until a value is selected in the dropdown. How can I show or hide a div based on ng-change, ensuring that div2 remains hidden until a value is selected? Cod ...

angularjstypescripttypescript1.4ng-hidetypescript1.5

Is it possible to utilize BehaviourSubject across different modules in Angular?

I am looking to utilize the BehaviourSubject for sharing data between two components that belong to different modules. How can I achieve this goal? CurrenciesModule export class CurrenciesComponent implements OnInit { defaultCurrency: CurrencyModel; ...

angularangular5behaviorsubject

Angular Persistent States in Angular version 2 and beyond

Currently, I am in the process of transitioning an Angular 1.5.X application to Angular 4. Within my app, I incorporate Angular Ui-Router Sticky State from https://github.com/ui-router/sticky-states to prevent loss of content within my view when navigating ...

javascriptangularjsangularangular-ui-routerangular2-routing

The tab title will be invisible if it is located within the second Angular component

Currently, I am utilizing the material css framework in combination with Angular (both latest versions). Everything works perfectly fine when I create tabs within one component. However, when I decide to make each tab a separate component, an issue arises ...

angulartabs