Show spinner while exporting in Angular TreeGrid component

27 Aug 20255 minutes to read

A spinner can be displayed during TreeGrid export operations using the showSpinner and hideSpinner methods.

Use the toolbarClick event to show the spinner before initiating export, and hide it in the pdfExportComplete or excelExportComplete events after export completes.

In the toolbarClick event, use args.item.text to determine whether “PDF Export” or “Excel Export” is being invoked, and then call the showSpinner method on the TreeGrid instance.

Upon completion of PDF or Excel export, call the hideSpinner method in the corresponding event.

The following demo displays the default spinner during TreeGrid export operations.

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit, ViewChild } from '@angular/core';
import { projectData } from './datasource';
import { TreeGridComponent,  ToolbarItems, ToolbarService, PageService, PdfExportService, ExcelExportService  } from '@syncfusion/ej2-angular-treegrid';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    providers: [ToolbarService, PageService, PdfExportService,ExcelExportService],
    template: `<ejs-treegrid #treegridObj [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID'
    [treeColumnIndex]='1' [allowPaging]='true' [pageSettings]='initialPage' [toolbar]='toolbarOptions'
    [allowPdfExport]='true' [allowExcelExport]='true' (excelExportComplete)='excelExportComplete()'
    (pdfExportComplete)='pdfExportComplete()' (toolbarClick)='toolbarClick($event)'>
        <e-columns>
            <e-column field='TaskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='TaskName' headerText='Task Name' width='100' ></e-column>
            <e-column field='StartDate' headerText='Start Date' textAlign='Right' [format]='formatOptions' width='100'></e-column>
            <e-column field='EndDate' headerText='Start Date' textAlign='Right' [format]='formatOptions'width='100'></e-column>
            <e-column field='Duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column field='Priority' headerText='Priority' width='90'></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public formatOptions?: Object;
    public toolbarOptions?: ToolbarItems[];
    public initialPage?: object;

    @ViewChild('treegridObj')
    public treegridObj?: TreeGridComponent;

    ngOnInit(): void {
        this.data = projectData;
        this.formatOptions = { format: 'y/M/d', type: 'date' };
        this.toolbarOptions = ['PdfExport', 'ExcelExport'];
        this.initialPage = { pageCount: 5, pageSize: 5 };
    }
    toolbarClick(args: ClickEventArgs) {
      if (this.treegridObj && args.item.text === 'PDF Export') {
        this.treegridObj.showSpinner();
        this.treegridObj.pdfExport();
      }
      else if (this.treegridObj && args.item.text === 'Excel Export') {
        this.treegridObj.showSpinner();
        this.treegridObj.excelExport();
      }
    }
    pdfExportComplete() {
        if (this.treegridObj) {
            this.treegridObj.hideSpinner();
        }
    }
    excelExportComplete() {
        if (this.treegridObj) {
            this.treegridObj.hideSpinner();
        }
    }
  }

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

For detailed feature walkthroughs, visit the Angular TreeGrid feature tour page. Additional examples for exporting and visual enhancements are available in the Angular TreeGrid example.