Awesome
ng2csv
Angular module for saving CSV files.
Quickstart
-
Install
file-saver
andng2csv
modules from npm:npm install file-saver ng2csv --save
-
Import
Ng2CsvModule
to your app:import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { Ng2CsvModule } from 'ng2csv'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, Ng2CsvModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
-
Inject the
Ng2CsvService
into your component:import { Component } from '@angular/core'; import { Ng2CsvService } from 'ng2csv'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Ng2CsvService] }) export class AppComponent { public constructor(private ng2Csv: Ng2CsvService) {} public download(): void { this.ng2Csv.download([ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ], 'names.csv'); } }
Configuration
Auto mapping
Unless specified, an automatic mapping is used from the data to columns. It does this by looking at the properties available on the object and then enumerating them, one column for each, and using the .toString()
method to serialise the values to the CSV data.
Row headers and ordering
You can output a subset of the data's properties to CSV by defining your own custom mapping. This allows you to specify the order columns are written in and what value is written for each row in each column.
import { OrderedProjectionCsvRowMapper } from 'ng2csv';
// ...
const rowMapper = new OrderedProjectionCsvRowMapper<MyType>([
['First Name', x => x.Name],
['Identifier', x => 'N' + x.Id.toString()]
]);
this.ng2Csv.download(myData, 'file.csv', rowMapper);
/*
Generates CSV:
"First Name","Identifier"
Alice,N1
Bob,N2
*/
Delimiters, header row
You can control what character is used to separate columns (e.g. to use ';' or tab separators rather than ',') and whether to include a header row.
import { CsvConfiguration } from 'ng2csv';
// ...
const csvConfig = new CsvConfiguration();
csvConfig.delimiter = '\t';
csvConfig.includeHeaderRow = false;
this.ng2Csv.download(myData, 'file.csv', undefined, csvConfig);
Null or undefined values
You can control how null
or undefined
values are written out in config.
import { CsvConfiguration } from 'ng2csv';
// ...
const csvConfig = new CsvConfiguration();
csvConfig.outputValueForNull = 'NULL';
csvConfig.outputValueForUndefined = 'UNDEFINED';
Contributions welcome!
If you have a feature or improvement you would like to see included, please raise an issue or a PR and I will review.
License
See the LICENSE file for license rights and limitations (MIT).