CODEWITHSUNDEEP
angularperformancemultidimensional-arrayngfor
user2055886
user2055886

Reputation: 109

Angular 8 - nested ngFor is extremely slow

I am trying to display 2d array by 2 nested ngFor

<div class="row" *ngIf="!calculating" style="margin: auto;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-sm-offset-1 col-md-offset-2">
      <div class="row" *ngFor="let pixelRow of pixels" style="width: max-content;">
        <div class="col pixel" 
        *ngFor="let pixel of pixelRow"  
        [ngStyle]="{'background-color': pixel.Color }"
        (click)="changePixelState(pixel.xIndex, pixel.yIndex)"></div>
      </div>
    </div>
  </div>

Basically it works fine on normal scale of data, but when it been defined as 1000X1000 - It takes huge time to be display and meanwhile the page is not responsive. I have tried to use cdk-virtual-scroll-viewport but i couldn't find any documentation of how to use it on 2d array, only on one list of data.

What can I do? any Ideas?

Upvotes: 2

Views: 3823

Answers (2)

Sameh
Sameh

Reputation: 1418

You can use the following lazy loading virtual scroller component load data in batches PrimeNG Virtual Scroller

Upvotes: 0

Sameh
Sameh

Reputation: 1418

Hi you can always overwrite the trackBy of the ngFor providing your own implementation can speed up performance,

1- Inject a unique Identifier in each of your object an Id or Guid

2- Use the unique identifier in your teackBy method

3- In your template html bind the trackBy method 

<ul>
  <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
</ul>

4- In your ts file 

trackByFn(index, item) {
   return item.id;}

Now when you change the collection, Angular can track which items have been added or removed according to the unique identifier and create or destroy only the items that changed.

Upvotes: 1

Related Questions