DOM update with ngFor

Ionic Framework Ionic Angular
1

Hello guys, could anyone help me with an issue i’m having on my app?
I have this template, and when ‘itemsByDeliveryHour’ is updated the DOM goes crazy creating divs.
I wanna render all at once after the last pass on the ngFor, or at least give the felling of it.

ng-container *ngIf=“itemsByDeliveryHour?.length” (rendered)=“listLoaded”>

<div \*ngFor="let item of itemsByDeliveryHour; let last = last; let first = first " class="items-group" \[ngClass\]="{'opened': item.opened}" >

    <ion-item-divider (click)="openGroup(item)">

      {{item.label}} <span>(<span \*ngIf="isAdminOrSeller">{{item.countWithDeliveryMan}}/</span>{{item.count}})</span>

    </ion-item-divider>

    <div \*ngFor="let itemI of item.itemsByDeliveryArea" class="items-group" \[ngClass\]="{'opened': itemI.opened}">

      <ion-item-divider (click)="openGroupDelivery(itemI)">

        {{itemI.label}} <span>(<span

            \*ngIf="isAdminOrSeller">{{itemI.countWithDeliveryMan}}/</span>{{itemI.count}})</span>

      </ion-item-divider>



      <adm-dispatch-list-item \[items\]="itemI.items" \[searchTerm\]="searchText" \[user\]="user" \[store\]="store"

        \[dispatchFilter\]="dispatchFilter" (listItemUpdated)="listItemUpdated()"></adm-dispatch-list-item>

    </div>

    <hr>

  <div \*ngIf="last">

    <ng-container \*ngIf="onRenderComplete(true)"></ng-container>

  </div>

</div>

<hr>
2

  1. the main problem was the nested ngFor, i put trackby on all them who is part of it and also make a comparison to not update the list if the new and the old the are the same

  2. now its better, it’s not the same as before on ionic 3 but is bearable