Data Export In Angular Using Ignite-UI

Introduction

Export to Excel or CSV file is a very common need in every web project which is mostly used for reporting the purposes but to export, the data in the Excel from the data source takes a huge code. Infragistics provides a very simple way to achieve this in Angular which takes either a data source or IgxGrid data grid as source and converts it into Excel, CSV, or TSV file very easily. IgxGrid data grid is a vast concept so in this article, we will use the data source to export the file.

What we will cover in this article

In this article, we will cover the following features,

Export Data from the data source to CSV File
Export Data from the data source to TSV File
Export Data from the data source to Excel File
Filter Data before Export

Let's get started,

Note
In case you have not set up the Ignite-UI for Angular, Click here for proper documentation provided by the Ignite. You can use either the Ignite-CLI or Angular-CLI. I prefer to go through the Angular-CLI manual process which explores that how the Ignite UI works.

After the setup, the Ignite UI for Angular, let us open the VS Code opened in the terminal window and type the following command to make a new Project.

ng new Export-Demo

Listing 1

Open the newly created project folder in VS Code. Now, go to the app.module.ts file and add the following code in the file. Refer to listing 2.

import { IgxCsvExporterService, IgxExcelExporterService} from 'igniteui-angular';
import { FormsModule } from '@angular/forms';
imports: [
BrowserModule,
FormsModule
],
providers: [IgxCsvExporterService, IgxExcelExporterService]

Listing 2

Let’s open the app.component.html file and paste the code shown in Listing 3.

In this HTML, we are creating UI for collecting employee information. The user can insert the details of employee and click on add which will bind the inserted employee details in the grid.

<div class="container">
<div class="row">
<div class="col-md-6">
<h2>
Add New Employee
</h2>
</div>
</div>
<div class="row">
<div class="col-md-3">
Employee Name
</div>
<div class="col-md-3">
Employee Address
</div>
<div class="col-md-3">
Employee Department
</div>
<div class="col-md-3">
Employee Salary
</div>
</div>
<div class="row">
<div class="col-md-3">
<input type="text" [(ngModel)]="model.name" class="form-control">
</div>
<div class="col-md-3">
<input type="text" [(ngModel)]="model.address" class="form-control">
</div>
<div class="col-md-3">
<input type="text" [(ngModel)]="model.deptName" class="form-control">
</div>
<div class="col-md-3">
<input type="text" [(ngModel)]="model.salary" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input type="button" (click)="AddEmployee(model)" value="Save" class="btn btn-success">
</div>
</div>
<div class="row" style="margin-top: 15px" *ngIf="empList.length > 0">
<div class="col-md-12">
<h3>
Employee List
</h3>
</div>
<div class="col-md-12">
<table class="table table-bordered">
<tr>
<th>
Employee Name
</th>
<th>
Employee Address
</th>
<th>
Employee Department
</th>
<th>
Employee Salary
</th>
</tr>
<tr *ngFor="let emp of empList">
<td>
{{emp.name}}
</td>
<td>
{{emp.address}}
</td>
<td>
{{emp.deptName}}
</td>
<td>
{{emp.salary}}
</td>
</tr>
</table>
</div>
</div>

Listing 3

Let’s create a folder and add one model named Employee.ts in our project which help us to get data from UI to backend. Refer to Listing 4.

export class Employee {
name: string;
address: string;
deptName: string;
salary: number; {

Listing 4

Open app.component.ts file and add the following code shown in Listing 5, First import the employee model on the top of the file “import { Employee } from '../models/Employee'” and add two variable to hold the values. Refer to Listing 5.

import { Component } from '@angular/core';
import { Employee } from '../models/Employee';
export class AppComponent {
title = 'app';
model: Employee = new Employee();
empList: Employee[] = [];
AddEmployee(obj: Employee): void {
this.empList.push(obj);
this.model = new Employee();
}
}

Listing 5

Now, go to the VS Code terminal and hit the command shown in listing 6 to run the app. The final output will be like figure 1.

ng serve --o

Listing 6

Figure 1

As listing 2 shows we already import the required services for import feature in app.module.ts.

Now, let’s add three button and 3 function for Export to CSV, Export to TSV and Export to Excel with corresponding function in app.component.ts file. Refer to Lsiting 7.

<div class="col-md-12">
<input type="button" value="Export To CSV" (click)="ExportToCSV()" class="btn btn-primary">
<input type="button" value="Export To TSV" (click)="ExportToTSV()" class="btn btn-warning">
<input type="button" value="Export To Excel" (click)="ExportToExcel()" class="btn btn-danger">
</div>

Listing 7

Now, let’s go to the app.compont.ts file and first import the required services and inject in constructor. Then add three function to export and their implementation. Refer to Listing 8. In all these three function we are passing the empList object to an encapsulated exportdatafunction.

import { Employee } from '../models/Employee';
import { CsvFileTypes, IgxCsvExporterOptions, IgxCsvExporterService, IgxExcelExporterOptions, IgxExcelExporterService } from "igniteui-angular";
export class AppComponent {
title = 'app';
model: Employee = new Employee();
empList: Employee[] = [];
constructor(private csvExportService: IgxCsvExporterService, private excelExportService: IgxExcelExporterService) {
}
AddEmployee(obj: Employee): void {
this.empList.push(obj);
this.model = new Employee();
}
ExportToCSV() {
const opt: IgxCsvExporterOptions = new IgxCsvExporterOptions("CSVExportFileFromData", CsvFileTypes.CSV);
this.csvExportService.exportData(this.empList, opt);
}
ExportToTSV() {
const opt: IgxCsvExporterOptions = new IgxCsvExporterOptions("CSVExportFileFromData", CsvFileTypes.TSV);
this.csvExportService.exportData(this.empList, opt);
}
ExportToExcel() {
this.excelExportService.exportData(this.empList, new IgxExcelExporterOptions("ExportFileFromData"));
}
}

Listing 8

Save the code and go back to the browser. You will see three different button with different mode of export functionality. Click on buttons and file get is download. Refer to Figure 2.

Figure 2

Filter data before export

We can also filter the source before exporting info file, i.e., Excel, CSV or TSV. We can either filter the row or we can exclude a whole column to export. This might be useful when we need to remove the irrelevant data from our report. Let’s modify the previous examples and create two more control. First control decide which column to exclude from excel report and second control decide which row to remove by employee name. For that let’s add one dropdown for column name which has static values and one textbox for employee name. Both of them have a ngModel property which can later pass two excel function. Refer to Listing 9.

<div class="col-md-12">
<div class="row">
<div class="col-md-3">
Column to hide in Excel only
<select [(ngModel)]="ColumnToHide" class="form-control">
<option value="Select">
Select
</option>
<option value="name">
Name
</option>
<option value="address">
Address
</option>
<option value="deptName">
Department Name
</option>
<option value="salary">
Salary
</option>
</select>
</div>
<div class="col-md-3">
Employee Name to filter
<input type="text" class="form-control" [(ngModel)]="EmpNameToRemove">
</div>
</div>
</div>
<input type="button" value="Export To Excel" (click)="ExportToExcel(ColumnToHide, EmpNameToRemove )" class="btn btn-danger">

Listing 9

Let’s modify the export function in app.component.ts. There are two function which can be used to filter the data before exporting to excel i.e. onRowExport and onColumnExport. Both of them are event emitter type which which returns IRowExportingEventArgs and IColumnExportingEventArgs. To use these function let’s subscribe them and set the cancel property to true. Refer to listing 10.

ExportToExcel(col: string, empName: string) {
this.excelExportService.onRowExport.subscribe((args: IRowExportingEventArgs) => {
if (args.rowData.name == empName) // this will check the row before exporting and where name field is same as 'Jatin Saini', it will go inside that block
args.cancel = true; // this set flag to true (not to export)
});
this.excelExportService.onColumnExport.subscribe((args: IColumnExportingEventArgs) => {
if (args.header == col) // this will check the header name and if header name is 'name' it will come inside
args.cancel = true; // this set flag to true (not to export)
});
this.excelExportService.exportData(this.empList, new IgxExcelExporterOptions("ExportFileFromData"));
}

Listing 10

Now, if I save the code and go back to the browser and add the random data. You will see column name to skip and employee name to skip the whole row. When you click on export to excel button these column/row will not be exported. Refer to Figure 3.

Figure 3

Conclusion

Infragistics provides several features in this Exporter that can change the height of a cell or you can change the width of the column, pin the column, set the column order etc. Infragistics concentrate on how they can provide maximum features of control with the simple and minimum implementation of control on the project.