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.
`
Select Suppliers
0 ? allSuppliers?.length : 0">
#
Supplier Number
Supplier Name
Country
City
Address
{{ item.VENDOR_NUMBER }}
{{ item.VENDOR_NAME }}
{{ item.COUNTRY }}
{{ item.CITY }}
{{ item.ADDRESS }}
`
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 fileopenAllSuppliers(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 }); }
supplier-parent-modal.component.html
`<button type="button" class="btn btn-primary btn-sm add-btn float-right" *ngIf="mode === 'ADD_MODE'" (click)="openAllSuppliers(modalLoadAllSuppliers)"> New Supplier
`
child supplier modal (nested modal)
`
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 }); }