Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ctrl/ngx-csv

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ctrl/ngx-csv

Easily generate a CSV download in the browser with Angular

  • 6.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

@ctrl/ngx-csv

npm CircleCI coverage

Easily generate a CSV download in the browser with Angular

Demo: https://ngx-csv.vercel.app

Install

npm install @ctrl/ngx-csv

Dependencies

Latest version available for each version of Angular

ngx-csvAngular
2.1.18.x
3.0.19.x
4.0.010.x
5.0.012.x, 13.x
current>= 14.x

Import

import { CsvModule } from '@ctrl/ngx-csv';

Use

Add the csvLink directive to your <a> tag

<a csvLink [data]="data">Download</a>

Input

  • data: The body of the csv
  • headers: Set the first line of the csv
  • delimiter: Set the seperator between values. Default ','
  • filename: Set the filename of the csv. Default data.csv
  • uFEFF: Adds a Byte order mark to setup the csv as UTF-8. Default true
  • target: Element target. Default `_blank

Accepted Data Formats

Array of objects

keys are used as the column headers

const data = [
  { firstname: 'Ahmed', lastname: 'Tomi', email: 'ah@smthing.co.com' },
  { firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' },
  { firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' },
];
Array of strings

first line used as headers if not supplied

const data = [
  ['firstname', 'lastname', 'email'],
  ['Ahmed', 'Tomi', 'ah@smthing.co.com'],
  ['Raed', 'Labes', 'rl@smthing.co.com'],
  ['Yezzi', 'Min l3b', 'ymin@cocococo.com'],
];
String

An already formatted csv from an outside source

const data = `firstname,lastname
Ahmed,Tomi
Raed,Labes
Yezzi,Min l3b
`;
Array of objects with custom headers

provided headers

const headers = [
  { label: 'First Name', key: 'firstname' },
  { label: 'Last Name', key: 'lastname' },
  { label: 'Email', key: 'email' },
];

const data = [
  { firstname: 'Ahmed', lastname: 'Tomi', email: 'ah@smthing.co.com' },
  { firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' },
  { firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' },
];

See Also

Keywords

FAQs

Package last updated on 20 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc