I want to show a popup after table is pletely loaded. Am using load property but it is not working. Is there any other way to achieve this? Without parent-child concept.

following is my code ponent.ts

export class FileUploadComponent {
    public files: UploadFile[] = [];
    data: AOA = [ [1, 2], [3, 4] ];
    wopts: XLSX.WritingOptions = { bookType: 'xlsx', type: 'array' };
    fileName: string = 'SheetJS.xlsx';
    showData: boolean = false;

    public dropped(event: UploadEvent) {
       this.files = event.files;
       for (const droppedFile of event.files) {
         if (droppedFile.fileEntry.isFile) {
           const reader: FileReader = new FileReader();
           const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
           fileEntry.file((file: File) => {
              var filePath = file;
             reader.onload = (e: any) => {
              const bstr: string = e.target.result;
              const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
              const wsname: string = wb.SheetNames[0];
              const ws: XLSX.WorkSheet = wb.Sheets[wsname];
              this.data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 1}));
            };
            reader.readAsBinaryString(file);
            this.showData = true;
            this.infoModal.hide();
          });
       } else {
          this.showData = false;
          const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
       }
     }
   }

  showPopUp(){ 
     console.log('yes');
  }
}

Following is my ponent.htm

      <div class="modal-body">
        <file-drop id="infoFileModal" headertext="Drop files here" (onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"></file-drop>
      </div>

 <div class="card-body">
   <div *ngIf="showData" class="upload-table  table-responsive">
     <table #table class="table-bordered table-striped" id="dest_table" (load)="showPopup()">
        <tr *ngFor="let row of data">
           <td *ngFor="let val of row">
              {{val}}
           </td>
        </tr>
     </table>
  </div>
  <div *ngIf="!showData" class="div-upload">
     No Data Found
  </div>
 </div>

I want to show a popup after table is pletely loaded. Am using load property but it is not working. Is there any other way to achieve this? Without parent-child concept.

following is my code ponent.ts

export class FileUploadComponent {
    public files: UploadFile[] = [];
    data: AOA = [ [1, 2], [3, 4] ];
    wopts: XLSX.WritingOptions = { bookType: 'xlsx', type: 'array' };
    fileName: string = 'SheetJS.xlsx';
    showData: boolean = false;

    public dropped(event: UploadEvent) {
       this.files = event.files;
       for (const droppedFile of event.files) {
         if (droppedFile.fileEntry.isFile) {
           const reader: FileReader = new FileReader();
           const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
           fileEntry.file((file: File) => {
              var filePath = file;
             reader.onload = (e: any) => {
              const bstr: string = e.target.result;
              const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
              const wsname: string = wb.SheetNames[0];
              const ws: XLSX.WorkSheet = wb.Sheets[wsname];
              this.data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 1}));
            };
            reader.readAsBinaryString(file);
            this.showData = true;
            this.infoModal.hide();
          });
       } else {
          this.showData = false;
          const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
       }
     }
   }

  showPopUp(){ 
     console.log('yes');
  }
}

Following is my ponent.htm

      <div class="modal-body">
        <file-drop id="infoFileModal" headertext="Drop files here" (onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"></file-drop>
      </div>

 <div class="card-body">
   <div *ngIf="showData" class="upload-table  table-responsive">
     <table #table class="table-bordered table-striped" id="dest_table" (load)="showPopup()">
        <tr *ngFor="let row of data">
           <td *ngFor="let val of row">
              {{val}}
           </td>
        </tr>
     </table>
  </div>
  <div *ngIf="!showData" class="div-upload">
     No Data Found
  </div>
 </div>

• javascript
• angular
• typescript

Share Improve this question Follow edited Apr 30, 2018 at 8:14 Esco asked Apr 30, 2018 at 6:56 EscoEsco 39722 gold badges33 silver badges1616 bronze badges 13

• does your table data e from service? or just static table? – Lia Commented Apr 30, 2018 at 6:58
• Where do you get the table's content from? Do you fill the table by *ngFor? – user6749601 Commented Apr 30, 2018 at 6:59
• You can use ngAfterViewInit() life cycle hook which is invoked when the ponent’s view has been fully initialized. – ranjeet8082 Commented Apr 30, 2018 at 7:00
• @ranjeet8082: In case of having a service that needs a lot of time to deliver the content this won't work properly. – user6749601 Commented Apr 30, 2018 at 7:02
• @fatemefazli It does not e from service. I'm importing an excel file and displaying data. It is taking some time to render the table pletely even after getting response. – Esco Commented Apr 30, 2018 at 7:06

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 1

Okay, so here is another approach.

As your table takes several minutes for rendering, after the data-array has been filled, your only chance is to listen to the change-event as long as it takes. To prevent the showPopUp()-method from being fired with every finished iteration, you use Observable.debounceTime(), which only calls the method when the time past after the last change-event is greater than the given time in milliseconds.

Component

import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Subscription} from "rxjs/Subscription";

 @ViewChild('table') table: any;
 private timer= Observable.timer(1000); // wait one second before calling the method
 private subscription: Subscription;

 ngOnDestroy(): void {
    if(this.subscription){
        this.subscription.unsubscribe();
    }
 }

public dropped(event: UploadEvent) {
        // ...

        reader.readAsBinaryString(file);
        this.showData = true;
        this.infoModal.hide();

        // call the watcher with a delay of one second
        // in order to give angular enough time to build up the table
        this.subscription = this.timer.subscribe( () => {
            this.triggerTableWatcher();
        });

        // ...

}


triggerTableWatcher() {
    // define the object to listen to
    const trigger = this.table.changes();

    // define the debounce-time (adjust it, if it doesn't fit your needs)
    const debounceAt = trigger.debounceTime(1000);

    // subscribe to the trigger and tell which method to call eventually
    debounceAt.subscribe(() => this.showPopUp());
}

HTML-Template (only the important part of it)

<div class="card-body">
   <div *ngIf="showData" class="upload-table  table-responsive">
      <table #table class="table-bordered table-striped" id="dest_table">
         <tr *ngFor="let row of data">
              <td *ngFor="let val of row">
                {{val}}
             </td>
         </tr>
     </table>
</div>

Native table does not have any load event. This logic should be delegated to the service which loads the data.

Or, as suggested in the ment, you can use ngAfterViewInit(). But: If the table has been first rendered, and the you load data, then it will not work

You can subscribe to the onloadend()-method of FileReader. Please look at the mented part of the code.

 public dropped(event: UploadEvent) {
     this.files = event.files;
     for (const droppedFile of event.files) {
       if (droppedFile.fileEntry.isFile) {
         const reader: FileReader = new FileReader();
         const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
         fileEntry.file((file: File) => {
            var filePath = file;
           reader.onload = (e: any) => {
            const bstr: string = e.target.result;
            const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
            const wsname: string = wb.SheetNames[0];
            const ws: XLSX.WorkSheet = wb.Sheets[wsname];
            this.data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 1}));
          };
          reader.readAsBinaryString(file);

          // subscribe to the onloadend()-method here
          reader.onloadend = (e) => {
            this.showPopUp();
          };

          this.showData = true;
          this.infoModal.hide();
        });
     } else {
        this.showData = false;
        const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
     }
   }
 }

 showPopUp(){ 
    console.log('yes');
 }