ngx-file-parser

Simple component to parse files with extensions

• CSV
• JSON

To be implemented: XML....

See demo

Dependencies

• Angular >= 9.1.9
• Angular Material >= 9.2.4

Installation

1.

NPM: npm install ngx-file-parser --save

Yarn: yarn add ngx-file-parser

2.

Import the NgxFileParserModule to provide the necessary components and directives.

import { NgxFileParserModule } from 'ngx-file-parser';
 
@NgModule({
  ...
  imports: [ NgxFileParserModule ],
  ...
})
export class AppModule { }

Usage

Declare NgxFileParserConfig object to provide to the directive

NgxFileParserConfig has the following properties

*See Angular Material buttons for accents

Example

import { NgxFileParserConfig } from "ngx-file-parser";
 
ngxFileParserConfig: NgxFileParserConfig = {
  btnText: "Upload",
  btnIcon: "backup",
  btnColor: "primary",
  accepts: [".csv"],
  csvNamedProperties: true,
};

Use the ngx-file-btn directive and provide the needed config object and event listener function to handle the parsed object

<ngx-file-btn
  [(config)]="ngxFileParserConfig"
  (parsedFile)="handleParsedFile($event)"
></ngx-file-btn>

ngx-file-btn has the following output events

export interface INgxResult {
  extension: string;
  result: INgxCsv | INgxJson | INgxComplexCsv;
}

Returns

All parsed object is returned as INgxResult with the extension of the file and a result object and is emitted to this event listener with the $event containing the parsed object

  handleParsedFile(parsedFileObj: INgxResult) {
    this.parsedFile = parsedFileObj.result as INgxCsv | INgxJson | INgxComplexCsv;
  }

CSV

Returns the interface INgxCsv with properties

CSV Named Properties

Returns the interface INgxComplexCsv with properties

JSON

Returns the interface INgxJson with the properties that are definied in the upload JSON file

Contribute

All PR's, issues and contributors are welcome! Feel free to start contributing

License

MIT