How to Display No Data for Export Alert when there is no data found Angular 6 kendo-excelexport Component

Question

Below is the code :i used angular 6 kendo-excelexport ^4.5.0 version component.

<kendo-excelexport [data]="excelDataToExport" [collapsible]="true" fileName="Sample.xlsx" #excelexport>
                <kendo-excelexport-column field="taxMonth" title="Month" [width]="200">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="clientName" title="Client Name" [width]="200">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="alertType" title="Alert Type" [width]="200">

                <kendo-excelexport-column field="Description" title="Description" [width]="200">
                </kendo-excelexport-column>

</kendo-excelexport>

Answer 1

Check the length of excelDataToExport if it is an array. If the length is greater than 0, download the excel sheet else show an alert.

To achieve this, use conditional expression on the click event of the export button.

Please find the working example: Demo

In the example comment/uncomment the data in product.ts file to see the no data alert / download excel respectively.

Answer 2

Main idea is to test for the data: if it's present, you can display the table. If it is null, you can display a message. If you bind it in the template, change detection takes care of updating the DOM for you if the data changes after the component is loaded:

<div *ngIf="excelDataToExport">...table code here ....</div>

<div *ngIf="!excelDataToExport">No data to export present</div>

To improve this code even further, you can use templates to avoid using two ngIf-s: ... and define a template:

<ng-template #noDataLabel>No data to export present</ng-template>

It will replace the the div's content. Read more about this in the documentation.