HelpBot Assistant

How can I help you?

Excel Export Options in Angular Grid Component

19 Mar 202624 minutes to read

The Syncfusion® Angular Grid component provides powerful Excel and CSV export customization options. This flexibility enables precise control over exported content and layout, ensuring the output meets specific business requirements and presentation standards.

The Excel or CSV export action can be tailored using the excelExportProperties property. This property allows exporting specific columns, including or excluding hidden columns, exporting with custom data sources, enabling filters in exported files, changing file names, adding headers and footers, exporting multiple grids, customizing data based on queries, defining CSV delimiters, and setting themes.

Export current page records

The Syncfusion® Angular Grid provides option to generate Excel or CSV documents that include only the currently displayed page records. This feature improves export performance and file size management by limiting the exported content to the visible page.

To export the current page of the grid to an Excel or CSV document, specify the exportType property. This property defines which records to export with two available options:

Export Type Description
CurrentPage Exports only the records on the current grid page
AllPages Exports all records from the grid

The following example demonstrates exporting either the current page or all pages to an Excel document based on the selected item in the DropDownList when a toolbar item is clicked.

import { employeeData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { DropDownListAllModule, DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { ExcelExportProperties, ExcelExportService, ExportType, FilterService, GridComponent, GridModule, PageService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [GridModule,DropDownListAllModule],
  providers: [ExcelExportService,PageService, ToolbarService, FilterService],
  standalone: true,
  selector: 'app-root',
  template: `
        <div style="display: flex">
            <label style="padding: 5px 5px 5px 0"> Change export type: </label>
            <ejs-dropdownlist
            #dropDownList
            index="0"
            width="150"
            [dataSource]="dropDownData"></ejs-dropdownlist>
          </div>
          <div style="padding: 0px 0 5px 0">
            <ejs-grid #grid id='Grid' [dataSource]='data' allowPaging='true' [pageSettings]='initialPage'[toolbar]='toolbarOptions' 
            height='200px' [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
                    <e-column field='FirstName' headerText='FirstName' width=100></e-column>
                    <e-column field='LastName' headerText='Last Name' width=100></e-column>
                    <e-column field='City' headerText='City' width=100></e-column>
                </e-columns>
            </ejs-grid>
          </div>`
})
export class AppComponent implements OnInit {
  public data?: object[];
  public toolbarOptions?: ToolbarItems[];
  @ViewChild('grid') public grid?: GridComponent;
  @ViewChild('dropDownList')
  public dropDownList?: DropDownListComponent;
  public dropDownData: object[] = [
    { text: 'CurrentPage', value: 'CurrentPage' },
    { text: 'AllPages', value: 'AllPages' },
  ];
  public initialPage?: object;
  
  ngOnInit(): void {
    this.data = employeeData;
    this.toolbarOptions = ['ExcelExport'];
    this.initialPage = { pageSize: 6};
  }
  toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_excelexport') {
      // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
      const exportProperties: ExcelExportProperties = {
        exportType: ((this.dropDownList as DropDownListComponent).value as ExportType),
      };
      (this.grid as GridComponent).excelExport(exportProperties);
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Export selected records

Selected records export functionality enables generating Excel or CSV documents that include only specific data. This feature provides flexibility to export relevant records, enabling more focused and targeted Excel or CSV exports based on selection criteria.

To export only the selected records, utilize the exportProperties.dataSource property in the toolbarClick event.

Follow these steps to export the selected records from the Grid to a Excel or CSV file:

  1. Handle the toolbarClick event of the Grid.

  2. Retrieve the selected records using the getSelectedRecords method.

  3. Assign the selected data to the exportProperties.dataSource property.

  4. Trigger the export operation using the excelExport or csvExport method.

The following example demonstrates exporting the selected records to an Excel document when a toolbar item is clicked.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FreezeService, GridModule, SelectionService, GridComponent, ToolbarItems, ToolbarService,PageService, FilterService, ExcelExportService, SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ GridModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions'
               [allowPaging]='true' [allowPdfExport]='true' 
               [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)' 
               [selectionSettings]='selectionSettings'>
              <e-columns>
                  <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                  width=120></e-column>
                  <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                  <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
              </e-columns>
              </ejs-grid>`,
    providers: [ToolbarService, PageService, FilterService, ExcelExportService,FreezeService, SelectionService]
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public selectionSettings?: SelectionSettingsModel;
    public initialPage?: object;
    @ViewChild('grid') public grid?: GridComponent;
    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
        this.selectionSettings = { type: 'Multiple', enableSimpleMultiRowSelection: true };
    }
    toolbarClick(args: ClickEventArgs) {
        if (args.item.id === 'Grid_excelexport') {
            const selectedRecords = (this.grid as GridComponent).getSelectedRecords();
            const exportProperties = {
                dataSource: selectedRecords
            };
            (this.grid as GridComponent).excelExport(exportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Exporting grouped records

Grouped records export support provides an outline option for grouped records, enabling the ability to hide detailed data for better viewing in the exported document. This feature is particularly useful when sharing data that is grouped based on specific columns while maintaining the grouping structure in the exported file.

To achieve this functionality, inject the Group module into the grid, enable grouping by setting the allowGrouping property to true. Additionally, define the groupSettings.columns property to specify the columns by which to group the data.

The following example demonstrates exporting grouped records to an Excel document when a toolbar item is clicked:

import { data } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { ExcelExportService, FilterService, GridComponent, GridModule, GroupService, GroupSettingsModel, PageService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' 
               height='200px' [allowGrouping]='true' [groupSettings]='groupOptions' 
               [allowPaging]='true' [allowExcelExport]='true' 
               (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`,
    providers: [PageService, GroupService,ExcelExportService, ToolbarService, FilterService]
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;
    public groupOptions?: GroupSettingsModel;

    public ngOnInit(): void  {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
        this.groupOptions = { columns: ['CustomerID', 'ShipCity'] };
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') {
             // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            (this.grid as GridComponent).excelExport();
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Export with hidden columns

Hidden column export functionality in the Syncfusion® Angular Grid enables including hidden columns in the exported Excel document. This feature is useful when columns are hidden in the UI but still need to be included in the exported document for comprehensive data reporting.

To export hidden columns of the grid to an Excel or CSV file, set the includeHiddenColumn property to true in the excelExportProperties property.

The following example demonstrates to export hidden columns to an Excel file. In this example, the “Ship City” column, which is not visible in the UI, is exported to the Excel document. The grid can also be exported by changing the excelExportProperties.includeHiddenColumn property based on the switch toggle using the checked property of the EJ2 Toggle Switch Button component.

import { data } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { SwitchComponent, SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { ExcelExportProperties, ExcelExportService, GridComponent, GridModule, PageService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [GridModule,SwitchModule],
providers: [ExcelExportService, ToolbarService,PageService],
standalone: true,
    selector: 'app-root',
    template: `
            <div>
            <label style="padding: 10px 10px">
             Include or exclude hidden columns
            </label>
            <ejs-switch #switch id="switch"></ejs-switch>
            </div>
            <ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]='true' 
            [toolbar]='toolbarOptions' height='225px' [allowExcelExport]='true' 
            (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100>
                    </e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=130>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' [visible]='false'  
                    width=120></e-column>
                    <e-column field='ShipCountry' headerText='ShipCountry' width=100>
                    </e-column>
                </e-columns>
            </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;
    @ViewChild('switch')
    public switch?: SwitchComponent;

    public ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') {
            // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            const excelExportProperties: ExcelExportProperties = {
                includeHiddenColumn: (this.switch as SwitchComponent).checked,
            };
            (this.grid as GridComponent).excelExport(excelExportProperties);
        }
        
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Show or hide columns while exporting

Dynamic column visibility control during the export process enables selectively displaying or hiding specific columns based on requirements. This feature differs from the static Export with hidden columns feature by allowing runtime column visibility changes specifically for the export operation.

To show or hide columns based on interaction during the export process, follow these steps:

  1. Handle the toolbarClick event of the Grid component.

  2. Update the visibility of the desired columns by setting the visible property of the column to true or false.

  3. Export the grid to Excel.

  4. Handle the excelExportComplete event to restore the column visibility to its original state.

In the following example, the “Customer ID” is initially a hidden column in the grid. However, during the export process, the “Customer ID” column is made visible, while the “Ship City” column is hidden.

import { data } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { Column, ExcelExportService, FilterService, GridComponent, GridModule, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule],
    providers: [ExcelExportService, ToolbarService, FilterService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' 
               height='272px' [allowExcelExport]='true' (excelExportComplete)='excelExportComplete()' 
               (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' [visible]='false' 
                    width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    public ngOnInit(): void  {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') { 
            // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            ((this.grid as GridComponent).columns[1] as Column).visible = true;
            ((this.grid as GridComponent).columns[3] as Column).visible = false;
            (this.grid as GridComponent).excelExport();
        }
    }
    excelExportComplete(): void {
        ((this.grid as GridComponent).columns[1] as Column).visible = false;
        ((this.grid as GridComponent).columns[3] as Column).visible = true;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Show or hide columns while exporting with stacked header

Stacked header column visibility control enables customizing the data presented in exported files while using stacked headers for enhanced organization. This feature extends the dynamic column visibility functionality to support stacked header configurations.

To implement the show or hide columns feature during Excel export in the Grid, follow these steps:

  1. Handle the toolbarClick event of the Syncfusion Angular Grid.

  2. Update the visibility of the desired columns by setting the visible property of the column to true or false.

  3. Export the Syncfusion Angular Grid to Excel document using the excelExport or csvExport method.

  4. Handle the excelExportComplete event to restore the column visibility to its original state.

In the following example, the “Ship Name” is initially a hidden column in the Grid. However, during the Excel export process, the “Ship Name” column is made visible, while the “Order Date” column is hidden:

import { data } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { Column, ColumnModel, ExcelExportService, GridComponent, GridModule, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ GridModule],
    providers: [ExcelExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `
      <ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='225px' [allowExcelExport]='true' (excelExportComplete)='excelExportComplete()' (toolbarClick)='toolbarClick($event)'>
        <e-columns>
          <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
          <e-column field='CustomerID' headerText='Customer ID' [visible]='false' width=100></e-column>
          <e-column headerText="Order Details" [columns]="orderColumns" textAlign='Center'></e-column>
          <e-column headerText="Ship Details" [columns]="shipColumns" textAlign='Center'></e-column>
        </e-columns>
      </ejs-grid>`
})
export class AppComponent {
  @ViewChild('grid') public grid?: GridComponent;
  public data?: object[];
  public toolbarOptions?: ToolbarItems[];
  public orderColumns?: ColumnModel[];
  public shipColumns?: ColumnModel[];
    
  ngOnInit(): void  {
    this.data = data;
    this.toolbarOptions = ['ExcelExport'];
    this.orderColumns = [
      {
        field: 'OrderDate',
        headerText: 'Order Date',
        format: 'yMd',
        width: 130,
        textAlign: 'Right',
        minWidth: 10,
      },
      {
        field: 'Freight',
        headerText: 'Freight ($)',
        width: 120,
        format: 'C1',
        textAlign: 'Right',
        minWidth: 10,
      },
    ];
    this.shipColumns = [
      {
        field: 'ShippedDate',
        headerText: 'Shipped Date',
        format: 'yMd',
        textAlign: 'Right',
        width: 150,
        minWidth: 10,
      },
      {
        field: 'ShipCountry',
        headerText: 'Ship Country',
        width: 150,
        minWidth: 10,
      },
      {
        field: 'ShipName',
        headerText: 'Ship Name',
        width: 150,
        minWidth: 10,
        visible:false
      },
    ];
  }
  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_excelexport') { 
      (((this.grid as GridComponent).columns[2] as ColumnModel).columns![0] as Column).visible = false;
      (((this.grid as GridComponent).columns[3] as ColumnModel).columns![2] as Column).visible = true;
      (this.grid as GridComponent).excelExport();
    }
  }
  public excelExportComplete(): void {
    (((this.grid as GridComponent).columns[2] as ColumnModel).columns![0] as Column).visible = true;
    (((this.grid as GridComponent).columns[3] as ColumnModel).columns![2] as Column).visible = false;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable filtering in the exported Excel file

Excel file filtering support enables exporting data to Excel or CSV with filter options and also exporting only filtered records. This feature is especially beneficial when sharing data with others while preserving the ability for them to filter and analyze the data in Excel or CSV.

To enable this feature, set the enableFilter property to true in the excelExportProperties object. Additionally, set allowFiltering to true in the grid configuration. This property enables filtering in the grid.

The following example demonstrates exporting data with filter options to an Excel document when a toolbar item is clicked:

import { data } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { ExcelExportProperties, ExcelExportService, FilterService, GridComponent, GridModule, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule],
    providers: [ExcelExportService, ToolbarService, FilterService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [allowFiltering]='true' 
               [toolbar]='toolbarOptions' height='225px'
               [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' 
                    width=150 [visible]='false'></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    public ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') { 
            // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            const excelExportProperties: ExcelExportProperties = {
                enableFilter: true
            };
            (this.grid as GridComponent).excelExport(excelExportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Define file name

Custom file name configuration enables specifying a meaningful and descriptive name for the exported Excel or CSV document. This feature makes it easier to identify and manage the exported data.

To assign a custom file name for the exported document, set the fileName property of the excelExportProperties property to the desired file name.

The following example demonstrates to define a file name using ExcelExportProperties.fileName property when exporting to Excel, based on the entered value as the file name.

import { data } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { ExcelExportProperties, ExcelExportService, GridComponent, GridModule, PageService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule,TextBoxModule],
    providers: [ExcelExportService, ToolbarService,PageService],
    standalone: true,
    selector: 'app-root',
    template: `
            <div style="padding: 0px 0 5px 0">
            <label style="padding: 30px 17px 0 0">Enter file name: </label>
            <ejs-textbox #textbox placeholder="Enter file name" width="120">
            </ejs-textbox>
            </div>
            <ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]='true' 
            [toolbar]='toolbarOptions' height='200px' [allowPaging]='true' 
            [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100>
                    </e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120>
                    </e-column>
                </e-columns>
            </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;
    @ViewChild('textbox') public textbox?: TextBoxComponent;

    public ngOnInit(): void  {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') {
            const excelExportProperties: ExcelExportProperties = {
                fileName: (this.textbox as TextBoxComponent).value !== "" ? (this.textbox as TextBoxComponent).value + '.xlsx' : 'new.xlsx'
            };
            (this.grid as GridComponent).excelExport(excelExportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Export the master detail grid

Master-detail grid export functionality enables exporting not only the master grid but also the associated detail grid onto a single Excel sheet. This feature proves particularly valuable when dealing with hierarchical data represented by two grids in the exported Excel file, allowing for comprehensive analysis and management.

To export the master-detail grid on the same sheet, set the multipleExport.type property of the excelExportProperties object to AppendToSheet. It also has an option to provide blank space between the grids. This blank space can be defined by using multipleExport.blankRows property.

The following example demonstrates exporting master detail grid to the same page in an Excel file when a toolbar item is clicked. The rowSelected event dynamically updates the detail grid based on the selected master record:

import { customerData, data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ExcelExportProperties, ExcelExportService, GridComponent, GridModule, RowSelectEventArgs, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

type carType = { CustomerID: string, CustomerName: string, ContactName: string };

@Component({
  imports: [ GridModule],
  providers: [ToolbarService, ExcelExportService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-grid #mastergrid id="mastergrid" [dataSource]='masterdata' 
             [selectedRowIndex]="1" [toolbar]='toolbarOptions' 
             [allowExcelExport]="true" (rowSelected)="onRowSelected($event)" 
             (toolbarClick)="toolbarClick($event)" [exportGrids]='exportGrids'>
                <e-columns>
                    <e-column field='ContactName' headerText='Customer Name' 
                    width='150'></e-column>
                    <e-column field='CompanyName' headerText='Company Name' 
                    width='150'></e-column>
                    <e-column field='Address' headerText='Address' width='150'></e-column>
                    <e-column field='Country' headerText='Country' width='130'></e-column>
                </e-columns>
            </ejs-grid>
            <div class='e-statustext'>Showing orders of Customer: <b id="key"></b></div>
            <ejs-grid #detailgrid id="detailgrid" [allowExcelExport]='true' 
            [dataSource]='data' [allowSelection]='false'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='100'></e-column>
                    <e-column field='Freight' headerText='Freight' format='C2' width='100' 
                    textAlign='Right' type='number'></e-column>
                    <e-column field='ShipName' headerText="Ship Name" width='150'></e-column>
                    <e-column field='ShipCountry' headerText="Ship Country" width='150'></e-column>
                    <e-column field='ShipAddress' headerText="Ship Address" width='150'></e-column>
                </e-columns>
            </ejs-grid>
                `
})
export class AppComponent implements OnInit {

    public masterdata?: object[];
    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public exportGrids?: string[];
    @ViewChild('mastergrid') public mastergrid?: GridComponent;
    @ViewChild('detailgrid') public detailgrid?: GridComponent;
    public names?: string[] = ['AROUT', 'BERGS', 'BLONP', 'CHOPS', 'ERNSH'];

    ngOnInit(): void {
        this.masterdata = customerData.filter((e: carType | any) => (this.names as string[]).indexOf(e.CustomerID) !== -1);
        this.toolbarOptions = ['ExcelExport'];
        this.exportGrids = ['mastergrid', 'detailgrid'];
    }
    public onRowSelected(args: RowSelectEventArgs): void {
        let selectedRecord: carType = args.data as carType;
        (this.detailgrid as GridComponent).dataSource = data.filter((record: carType | any) => record.CustomerName === selectedRecord.ContactName).slice(0, 5);
       (document.getElementById('key') as HTMLElement).innerHTML = selectedRecord.ContactName;
    }
    public toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'mastergrid_excelexport') {
            const appendExcelExportProperties: ExcelExportProperties = {
                multipleExport: { type: 'AppendToSheet', blankRows: 2 }
            };
            (this.mastergrid as GridComponent).excelExport(appendExcelExportProperties, true);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing columns on export

Column customization on export enables tailoring specific column attributes such as field, header text, and text alignment in exported Excel or CSV documents. This feature ensures that exported Excels align perfectly with design and reporting requirements.

To customize the grid columns, the following steps can be followed:

  1. Access the excelExportProperties.column of the Grid component.

  2. Set the column object with attributes such as field, headerText, and textAlign to define the desired format.

  3. Trigger the Excel or CSV export operation to apply the customized column settings.

The following example demonstrates customizing the grid columns when exporting a document. In this scenario, the attributes for different columns have been customized: “Order ID” with textAlign set to Right, “Customer ID” with headerText as “Customer Name”, and “Freight” with a center-aligned textAlign property, which is not rendered in the grid columns:

import { data } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { Column, ExcelExportProperties, ExcelExportService, FilterService, GridComponent, GridModule, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [GridModule],
  providers: [ExcelExportService, ToolbarService, FilterService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' 
               [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120>
                        </e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=120></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=180></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent {

  public data?: object[];
  public toolbarOptions?: ToolbarItems[];
  @ViewChild('grid')
  public grid?: GridComponent;

  public ngOnInit(): void {
    this.data = data;
    this.toolbarOptions = ['ExcelExport'];
  }

  toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_excelexport') {
      // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
      const excelExportColumns: ExcelExportColumn[] = [
        { field: 'OrderID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer Name', width: 120 },
        { field: 'Freight', textAlign: 'Center', width: 120 },
      ];
      const excelExportProperties: ExcelExportProperties = {
        columns: excelExportColumns as Column[]
      };
      (this.grid as GridComponent).excelExport(excelExportProperties);
    }
  }
}
export interface ExcelExportColumn {
  field: string;
  headerText?: string;
  textAlign?: string;
  width?: number;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Font and color customization

Theme customization support for Excel export enables maintaining a consistent and visually appealing style for the exported data in Excel documents. This feature allows defining custom styles for captions, headers, and record content.

To apply a theme to the exported Excel document, define the theme property within the excelExportProperties. This property specifies the theme to be used in the exported Excel file, including styles for the caption, header, and record content.

Property Description
caption Defines the theme style for the caption content in the exported Excel document. The caption is the title or description that appears at the top of the exported Excel sheet.
header Defines the style for the header content in the exported Excel document. The header corresponds to the column headers in the Grid.
record Defines the theme style for the record content in the exported Excel document. The record represents the data rows in the Grid that are exported to Excel.

In the following example, apply font styling to the caption, header, and record in the Excel file using the theme property:

import { data } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { ExcelExportProperties, ExcelExportService, FilterService, GridComponent, GridModule, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule],
    providers: [ExcelExportService, ToolbarService, FilterService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' 
               height='272px' [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150>
                    </e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    public ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') { 
            // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            const excelExportProperties: ExcelExportProperties = {
                theme:
                    {
                        header: { fontName: 'Segoe UI', fontColor: '#666666' },
                        record: { fontName: 'Segoe UI', fontColor: '#666666' },
                        caption: { fontName: 'Segoe UI', fontColor: '#666666' }
                    }
            };
           (this.grid as GridComponent).excelExport(excelExportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Rotate a header text in the exported grid

Header text rotation support enables customizing the column header styles, such as changing the text orientation, font color, and more, in the exported Excel file. This feature is useful when enhancing the visual appearance of the exported data and providing a unique representation of the Grid in the Excel document.

To achieve this requirement, use the excelHeaderQueryCellInfo event of the Grid. This event is triggered when creating a column header for the Excel document to be exported. By customizing the column header within this event, the header text can be easily rotated to a certain degree in the exported Grid, making the data presentation in the Excel document more visually appealing and tailored to specific requirements.

In the following demo, using the rotation property of the style argument in the excelHeaderQueryCellInfo event, the header text of the column header can be rotated in the excel exported document.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { DropDownListComponent, DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { Cell, Column, ExcelExportService, ExcelHeaderQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs, ExcelStyle, FilterService, GridComponent, GridModule, GroupService, PageService, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule,DropDownListModule],
    providers: [PageService,SortService,FilterService,GroupService,ToolbarService,ExcelExportService],
    standalone: true,
    selector: 'app-root',
    template: `   
            <div style="display: flex; align-items: center;">
                <label style="margin-right: 10px;">Select a degree:</label>
                <ejs-dropdownlist id='ddlelement' #ddlelement placeholder='Select a degree' [dataSource]='degree'>
                </ejs-dropdownlist>
            </div>
            <div style="padding:px 0px 0px 0px">
                <ejs-grid #grid id="Grid" [dataSource]='data' [height]='240' (created)='setHeaderHeight()' (excelQueryCellInfo)='excelQueryCellInfo($event)' (excelHeaderQueryCellInfo)='excelHeaderQueryCellInfo($event)' (toolbarClick)='toolbarClick($event)' [toolbar]='toolbarOptions' [allowExcelExport]='true'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' [customAttributes]='customAttributes' width=120></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Center'
                        format='C2' width=80></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100 ></e-column>
                    </e-columns>
                </ejs-grid>
            </div>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public degree?: number[];
    public customAttributes?: object;
    @ViewChild('grid')
    public grid?: GridComponent;
    @ViewChild('ddlelement') public dropDownListObject?: DropDownListComponent;

    ngOnInit(): void {
        this.data = data;
        this.customAttributes = { class: 'orientationcss' };
        this.toolbarOptions = ['ExcelExport'];
        this.degree = [90, 180, 45, 135];
    }
    setHeaderHeight() {
        const textWidth = (document.querySelector('.orientationcss > div') as Element).scrollWidth;
        const headerCell: NodeList = document.querySelectorAll('.e-headercell');
        for (let i = 0; i < headerCell.length; i++) {
            (headerCell.item(i) as HTMLElement).style.height = textWidth + 'px';
        }
    }
    excelQueryCellInfo(args: ExcelQueryCellInfoEventArgs): void {
        if (args.column.field == 'Freight') {
            if ((args.value as number) < 30) {
                args.style = { backColor: '#99ffcc' };
            }
            else if ((args.value as number)< 60) {
                args.style = { backColor: '#ffffb3' };
            }
            else {
                args.style = { backColor: '#ff704d' };
            }
        }
    }

    excelHeaderQueryCellInfo(args: ExcelHeaderQueryCellInfoEventArgs): void {
        let textWidth = (document.querySelector(".orientationcss > div") as Element).scrollWidth;
        if ((args.gridCell as Cell<Column>).column.field == 'Freight') {
            args.style = { backColor: '#99ffcc', vAlign: 'Bottom' };
        }
        else {
            args.style = { vAlign: 'Center', rotation: ((this.dropDownListObject as DropDownListComponent).value as number) };
        }
        (args.cell as CustomExcelStyle).cellHeight = textWidth;
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') {
            (this.grid as GridComponent).excelExport();
        }
    }
}

interface CustomExcelStyle extends ExcelStyle {
    cellHeight?: number;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Conditional cell formatting

Conditional cell formatting support enables customizing the appearance of specific cells in the exported Excel document based on their values or other criteria.

To achieve this feature, use the excelQueryCellInfo event of the Grid component. This event is triggered for each cell during the export process to Excel. Within this event, the cell object can be accessed using the args.cell property and its properties, such as the background color, can be modified based on desired conditions.

The following example demonstrates customizing the background color of the Freight column in the exported Excel document using the args.cell and backgroundColor properties of the excelQueryCellInfo event.

import { columnDataType, data } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { Column, ExcelExportService, ExcelQueryCellInfoEventArgs, FilterService, GridComponent, GridModule, QueryCellInfoEventArgs, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ GridModule],
    providers: [ExcelExportService, ToolbarService, FilterService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' 
               height='272px' [allowExcelExport]='true' (queryCellInfo)='queryCellInfo($event)' 
               (excelQueryCellInfo)='excelQueryCellInfo($event)' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='Freight' headerText='Freight' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

   constructor() {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') { 
            // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            (this.grid as GridComponent).excelExport();
        }
    }
    excelQueryCellInfo(args: ExcelQueryCellInfoEventArgs): void {
        if (args.column.field === 'Freight') {
            if (args.value as number < 30) {
                args.style = { backColor: '#99ffcc' };
            } else if (args.value as number < 60) {
                args.style = { backColor: '#ffffb3' };
            } else {
                args.style = { backColor: '#ff704d' };
            }
        }
    }
    queryCellInfo({column,data,cell}:QueryCellInfoEventArgs): void {
        if ((column as Column).field === 'Freight') {
            if ((data as columnDataType)['Freight'] < 30) {
                (cell as HTMLElement).style.backgroundColor = '#99ffcc'
            } else if ((data as columnDataType)['Freight'] < 60) {
                (cell as HTMLElement).style.backgroundColor = '#ffffb3';
            } else {
                (cell as HTMLElement).style.backgroundColor = '#ff704d';
            }
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Header and footer content support in Excel or CSV export enables including additional information or branding in the exported Excel or CSV document. This feature is particularly useful for adding titles, page numbers, or company information.

To achieve this, use the toolbarClick event along with defining the header and footer properties in the excelExportProperties object, enabling customization of the header and footer content.

The following example demonstrates to add a header and footer to the exported grid:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ExcelExportProperties, ExcelExportService, FilterService, GridComponent, GridModule, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule],
    providers: [ExcelExportService, ToolbarService, FilterService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' 
               height='272px' [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right'
                     width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit{

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    public ngOnInit(): void 
     {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
     }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            const excelExportProperties: ExcelExportProperties = {
                header: {
                    headerRows: 7,
                    rows: [
                        {
                            cells: [{
                                colSpan: 4, value: 'Northwind Traders',
                                style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, }
                            }]
                        },
                        {
                            cells: [{
                                colSpan: 4, value: '2501 Aerial Center Parkway',
                                style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, }
                            }]
                        },
                        {
                            cells: [{
                                colSpan: 4, value: 'Suite 200 Morrisville, NC 27560 USA',
                                style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, }
                            }]
                        },
                        {
                            cells: [{
                                colSpan: 4, value: 'Tel +1 888.936.8638 Fax +1 919.573.0306',
                                style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, }
                            }]
                        },
                        {
                            cells: [{
                                colSpan: 4, hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' },
                                style: { hAlign: 'Center' }
                            }]
                        },
                        { cells: [{ colSpan: 4, hyperlink: { target: 'mailto:[email protected]' }, style: { hAlign: 'Center' } }] },
                    ]
                },
                footer: {
                    footerRows: 4,
                    rows: [
                        { cells: [{ colSpan: 4, value: 'Thank you for your business!', style: { hAlign: 'Center', bold: true } }] },
                        { cells: [{ colSpan: 4, value: '!Visit Again!', style: { hAlign: 'Center', bold: true } }] }
                    ]
                },
            };
            (this.grid as GridComponent).excelExport(excelExportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Export grid as blob

Blob export functionality enables exporting the data as a Blob instead of downloading it as a file in the browser. To export the grid as a Blob, set the isBlob parameter to true in the excelExport method. The grid returns the promise of a blob in the excelExportComplete event.

The following example demonstrates obtaining the blob data of the exported grid by executing the promise in the excelExportComplete event.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ExcelExportCompleteArgs, ExcelExportService, GridComponent, GridModule, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ GridModule ],
    providers: [ExcelExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='230px'  [allowExcelExport]='true' 
                (excelExportComplete)='excelExportComplete($event)' (toolbarClick)='toolbarClick($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='Freight' headerText='Freight' width=80></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid')
    public grid?: GridComponent;    

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ExcelExport', 'CsvExport'];
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') {
            // pass undefined to use default settings
            (this.grid as GridComponent).excelExport(undefined, undefined, undefined, true);
        }
        if (args.item.id === 'Grid_csvexport') {
            // pass undefined to use default settings
            (this.grid as GridComponent).csvExport(undefined, undefined, undefined, true);
        }
    }

    excelExportComplete(args: ExcelExportCompleteArgs): void {
        if (args && args.promise) { 
            // execute the promise to get the blob data
            args.promise.then((e: { blobData: Blob }) => {
                this.exportBlob(e.blobData);
            });
        }
    }

    public exportBlob = (blob: Blob) => {
        const a: HTMLAnchorElement = document.createElement('a');
        document.body.appendChild(a);
        a.style.display = 'none';
        const url: string = window.URL.createObjectURL(blob); // Fix typo here
        a.href = url;
        a.download = 'Export';
        a.click();
        window.URL.revokeObjectURL(url); // Fix typo here
        document.body.removeChild(a);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));