https://github.com/rars/ng2csv

Angular service for saving data to CSV file.
https://github.com/rars/ng2csv

angular angular2 csv

Last synced: 16 days ago
JSON representation

Angular service for saving data to CSV file.

• Host: GitHub
• URL: https://github.com/rars/ng2csv
• Owner: rars
• License: mit
• Created: 2017-07-12T21:51:13.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2024-03-28T19:53:56.000Z (9 months ago)
• Last Synced: 2024-04-14T10:09:42.058Z (8 months ago)
• Topics: angular, angular2, csv
• Language: TypeScript
• Homepage:
• Size: 2.38 MB
• Stars: 6
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ng2csv - Angular service for saving data to CSV file. (Table of contents / Third Party Components)
• fucking-awesome-angular - ng2csv - Angular service for saving data to CSV file. (Table of contents / Third Party Components)

README

        
# ng2csv

[![Node.js CI](https://github.com/rars/ng2csv/actions/workflows/node.js.yml/badge.svg)](https://github.com/rars/ng2csv/actions/workflows/node.js.yml)

Angular module for saving CSV files.

## Quickstart

1. Install `file-saver` and `ng2csv` modules from npm:

   ```

   npm install file-saver ng2csv --save

   ```

2. 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 { }

   ```

3. 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([

    ['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](LICENSE) file for license rights and limitations (MIT).