valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

If a modal sends large data via initialState to child modal, slowing down the modal performance #4868

Open gsaravanakumar932 opened 5 years ago

gsaravanakumar932 commented 5 years ago

supplier-parent-modal.component.html

Its just a bootstrap table which contains the existing suppliers names will get render. This is parent modal.

`<button type="button" class="btn btn-primary btn-sm add-btn float-right" *ngIf="mode === 'ADD_MODE'" (click)="openAllSuppliers(modalLoadAllSuppliers)">  New Supplier

Supplier Name Supplier Number Actions
{{ item.VENDOR_NAME }} {{ item.VENDOR_NUMBER }}
{{ item.VENDOR_NAME }} {{ item.VENDOR_NUMBER }}

`

child supplier modal (nested modal)

This is also present in the same parent html page as a child/nested modal. So onclick of parent openAllSuppliers button, this child modal will load more than 2000 rows in the table. In the modalService, if i give {initialState: this.allSuppliers}, child modal taking time to open (close to 15 seconds) and also if i click checkbox in the table, its taking much time to checked state in the view. All the events taking time to happen. `

`

Could anyone please help me whats wrong in my approach. Its really a very simple concept but i dont know why this much time is taking to load.

here is my component : supplier parent modal component.ts file openAllSuppliers(template: TemplateRef<any>) { this.modalAllSuppliers = this.modalService.show(template, { backdrop: false, class: 'modal-dialog-centered modal-xlg', ignoreBackdropClick: true, initialState: this.allSuppliers // more than 5000 records }); }

gsaravanakumar932 commented 5 years ago

attached the stackoverflow link also. Please help me to find where i am wrong.