NgxCsvParser
-
This is a CSV Parser library which will help you to parse a selected CSV File in your Angular Application. Currently working with Angular version 2 and above (latest 17 and so on) as tested along with backward compatibility with previous Angular versions.
-
This library is in compliance to RFC 4180
Examples/Demo
Installation
npm i ngx-csv-parser
API
import { NgxCsvParserModule } from 'ngx-csv-parser;
Usage
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxCsvParserModule } from 'ngx-csv-parser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxCsvParserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Configuration
-
The library has 3 configuration options.
-
header: true or false. This will allow you to make the first row of your CSV file act as the key for the result and the data from the remaining file as the value for those objects.
-
Example if the csv data is:
-
firstName,lastName
-
John,Doe
-
In case the header config is true the result will be:
[
{
firstName: 'John',
lastName: 'Doe'
}
]
- In case header config is false the result will be:
[
['firstName', 'lastName'],
['John', 'Doe']
]
-
delimiter: the marking factor which decides which symbol should be used to split the file.
-
Default delimiter is: ','
-
encoding: this will define the encoding type to parse the csv file. You can select different encoding types depending on your file.
-
Default encoding type is: 'utf8'
Use the import NgxCsvParser in your component.
For ngx-csv-parser version 1.1.0 and above
import { Component, ViewChild } from '@angular/core';
import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
csvRecords: any;
header: boolean = false;
constructor(private ngxCsvParser: NgxCsvParser) {
}
@ViewChild('fileImportInput') fileImportInput: any;
fileChangeListener($event: any): void {
const files = $event.srcElement.files;
this.header = (this.header as unknown as string) === 'true' || this.header === true;
this.ngxCsvParser.parse(files[0], { header: this.header, delimiter: ',', encoding: 'utf8' })
.pipe().subscribe({
next: (result): void => {
console.log('Result', result);
this.csvRecords = result;
},
error: (error: NgxCSVParserError): void => {
console.log('Error', error);
}
});
}
}
For ngx-csv-parser version 0.0.7 and below
import { Component } from '@angular/core';
import { ViewChild } from '@angular/core';
import { NgxCsvParser } from 'ngx-csv-parser';
import { NgxCSVParserError } from 'ngx-csv-parser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
csvRecords: any[] = [];
header = false;
constructor(private ngxCsvParser: NgxCsvParser) {
}
@ViewChild('fileImportInput', { static: false }) fileImportInput: any;
fileChangeListener($event: any): void {
const files = $event.srcElement.files;
this.ngxCsvParser.parse(files[0], { header: this.header, delimiter: ',' })
.pipe().subscribe((result: Array<any>) => {
console.log('Result', result);
this.csvRecords = result;
}, (error: NgxCSVParserError) => {
console.log('Error', error);
});
}
}
Running the example in local env
npm i
- Run
ng serve
for a dev server and running the demo app. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files. - Sample CSV File will be provided in the example folder.
Hiring for Remote Frontend or Full Stack Developer?
Services
Author