Tukukkk

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)">

        <i class="fas fa-plus"></i> &nbsp;New Supplier

      </button>

      <table class="table view-table" style="table-layout: fixed;">

        <thead class="bg-light">

          <tr>

            <th scope="col" width="45%">Supplier Name</th>

            <th scope="col">Supplier Number</th>

            <th scope="col" class="text-center" *ngIf="mode === 'ADD_MODE'">

              Actions

            </th>

          </tr>

        </thead>

        <tbody>

          <tr *ngFor="let item of newDealSuppliers; let i = index">

            <td>

              <a href="javascript:" title="Supplier needs rescreening.">

                {{ item.VENDOR_NAME }}

              </a>

            </td>

            <td>

              <a href="javascript:"> {{ item.VENDOR_NUMBER }} </a>

            </td>

            <td class="text-center" *ngIf="mode === 'ADD_MODE'">

              <button type="button" class="btn btn-danger btn-sm" title="Delete Supplier" (click)="onDeleteSupplier(i)">

                <i class="fas fa-trash"></i>

              </button>

            </td>

          </tr>



          <tr *ngFor="let item of dealSuppliers; let i = index">

            <td>

              <a href="javascript:" title="Supplier needs rescreening.">

                {{ item.VENDOR_NAME }}

              </a>

            </td>

            <td>

              <a href="javascript:"> {{ item.VENDOR_NUMBER }} </a>

            </td>

            <td class="text-center" *ngIf="mode === 'ADD_MODE'">

              <button type="button" class="btn btn-danger btn-sm" title="Delete Supplier" (click)="onDeleteSupplier(i)">

                <i class="fas fa-trash"></i>

              </button>

            </td>

          </tr>

        </tbody>

      </table>

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.

<ng-template #modalLoadAllSuppliers>

  <div class="modal-header bg-primary text-white">

    <h5 class="modal-title pull-left">

      <img src="../../../assets/images/icone-32-d-deal.svg" width="32" alt="" />

      <span class="modal-title-text">Select Suppliers </span>

    </h5>

    <button type="button" class="close pull-right modal-btn-close" aria-label="Close" (click)="onCancelSupplier()">

      <span aria-hidden="true" class="modal-close-x">&times;</span>

    </button>

  </div>

  <div class="modal-body">

    <div class="container-fluid">



      <div class="row" style="overflow-x: hidden;height: calc(55vh - 100px);">

        <div class="col">

          <div class="table-responsive">

            <table class="table view-table" *ngIf="allSuppliers?.length > 0 ? allSuppliers?.length : 0">

              <thead class="bg-light">

                <tr>

                  <th scope="col" width="50px">#</th>

                  <th scope="col">Supplier Number</th>

                  <th scope="col">Supplier Name</th>

                  <th scope="col">Country</th>

                  <th scope="col">City</th>

                  <th scope="col">Address</th>

                </tr>

              </thead>

              <tbody>

                <tr *ngFor="let item of allSuppliers">

                  <td>

                    <span class="custom-control custom-checkbox">

                      <input type="checkbox" class="custom-control-input" id="{{item.VENDOR_NUMBER}}" (change)="onSelectSupplier($event, item)" />

                      <label class="custom-control-label" for="{{item.VENDOR_NUMBER}}"></label>

                    </span>

                  </td>

                  <td>{{ item.VENDOR_NUMBER }}</td>

                  <td>{{ item.VENDOR_NAME }}</td>

                  <td>{{ item.COUNTRY }}</td>

                  <td>{{ item.CITY }}</td>

                  <td>{{ item.ADDRESS }}</td>

                </tr>

              </tbody>

            </table>

          </div>

        </div>

      </div>

    </div>

  </div>



  <div class="modal-footer">

    <button type="button" class="btn btn-light" (click)="onCancelSupplier()" style="border: 1px solid #e1e0e0;">

      Discard

    </button>

    <button type="button" class="btn btn-primary" (click)="onAddSupplier()">

      Add

    </button>

  </div>

</ng-template>

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 2000 records

});

}