How do I get a loader/spinner while exporting data of the SlickGrid?

Question

Im using slickgrid (2.12.2) and angular 8. I wanna know how can i show a loader/spinner while the data is been exported to csv, excel or file. Because if the data is large, the exportation take some time, and the person who is using might think that nothing is happening...

Answer 1

Note that I'm the author of Angular-Slickgrid. From the question and answer that I saw, it seems that I was missing this feature explained in my Wikis (there are a lot of Wikis, please read them) and so I updated both Wikis Export to Excel and Export to File (CSV/TabDelimited), the Grouping Example is the only demo showing this feature because that is the only one that can have lots of data (if you choose to use 50k rows from the demo and use grouping).

Here's the updated Wiki for the Excel Export

Option 1 (recommended)

View

<span [hidden]="!processing">
   <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
</span>

<angular-slickgrid gridId="grid2"
                     [dataset]="dataset"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     (onGridBeforeExportToExcel)="processing = true"
                     (onGridAfterExportToExcel)="processing = false"
                     (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>

Component

export class MyComponent() implements OnInit {
  processing = false;
}

As per @Wingnod's answer you can also subscribe to the event in your code, but it's better to simply use the Event Emitters (onGridBeforeExportToExcel) since you won't need to care about the unsubscribe and the code is cleaner. If for some reason you do wish to subscribe to the event, you can do it this way

Option 2 (not recommended)

View

<angular-slickgrid gridId="grid2"
        [dataset]="dataset"
        [columnDefinitions]="columnDefinitions"
        [gridOptions]="gridOptions"
        (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>

Component

export class GridGroupingComponent implements OnInit, OnDestroy {
  exportBeforeSub: Subscription;
  exportAfterSub: Subscription;

  ngOnDestroy() {
    this.exportBeforeSub.unsubscribe();
    this.exportAfterSub.unsubscribe();
  }

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;

    // display a spinner while downloading
    this.exportBeforeSub = this.angularGrid.exportService.onGridBeforeExportToFile.subscribe(() => this.processing = true);
    this.exportAfterSub = this.angularGrid.exportService.onGridAfterExportToFile.subscribe(() => this.processing = false);
  }
}

You can see that Option 1 is a lot cleaner and easier to implement.