How to export CSV file in angular 10

There are 2 ways to export(download) the CSV on the web.

1. Generate at the server-side and then provide a link to download
2. Generate at client-side through angular

So today we will discuss the client-side through angular

Installation

We will use angular2-csv package to generate the CSV at the client-side(browser) Please run this command at your project root \

npm install --save angular2-csv

Setup

Please include the below code in your app.module.ts and in the child module also where you want to implement the download functionality.

I am implementing in the app.module.ts

  // file name app.module.ts
  import { Angular2CsvModule } from 'angular2-csv';
  

  // - Add in imports section of the `app.module.ts file`
  imports: [
    BrowserModule,
    AppRoutingModule,
    Angular2CsvModule
  ],

- in your app.component.ts add this or you can replace by it

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // option veriable
  options = {
    fieldSeparator: ',',
    quoteStrings: '"',
    decimalseparator: '.',
    showLabels: false,
    headers: [],
    showTitle: true,
    title: 'asfasf',
    useBom: false,
    removeNewLines: true,
    keys: ['approved','age','name' ]
  };
  
  // This data will be generated in the CSV file
  data = [
    {
      name: "Test, 1",
      age: 13,
      average: 8.2,
      approved: true,
      description: "using 'Content here, content here' "
    },
    {
      name: 'Test 2',
      age: 11,
      average: 8.2,
      approved: true,
      description: "using 'Content here, content here' "
    },
    {
      name: 'Test 3',
      age: 10,
      average: 8.2,
      approved: true,
      description: "using 'Content here, content here' "
    }
  ];
}

- Add the download button

In your app.component.html file or your html file where you want to add the download button,

// file name app.component.html
<angular2csv [data]="data" filename="test.csv" [options]="options"></angular2csv>

// data & options variables are initialized in the app.component.ts file

- Export CSV Without pagination(Export the REST API data)

Sometimes we want to export all the data, not the current page data. so with this case, we can export all data, we can set all data in the data variable. let's take an example of the REST API

this.apiService.getAllData().subscribe((result) => {

  this.data = result;
});

so in the example we are calling an apiSevice and getting all data from the server(I added a dummy service & a function) and assigning it to the data variable.

- Export CSV with pagination

If you are using pagination and you want to export the current page data then you can pass data in the data variable.

Now we have learned how to export the CSV file in angular. Please give it a try and I will be happy to answer your queries on my Twitter handle Twitter