Wondering what’s next for npm?Check out our public roadmap! »

ngx-file-parser
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

ngx-file-parser

npm version

Simple component to parse files with extensions

  • CSV
  • JSON

To be implemented: XML....

See demo

Dependencies

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

Property Description Default
btnText Text to be displayed on button Choose file
btnIcon Material icon to be displayed on button backup
btnColor* Color accent to the button transparent
accepts Array of file name extensions ['.csv']
csvNamedProperties If parsed CSV file should be returned as array of objects with named properties false

*See Angular Material buttons for accents

Example

import { NgxFileParserConfig } from "ngx-file-parser";
 
ngxFileParserConfigNgxFileParserConfig = {
  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

Event Description Type
parsedFile The result of the parsed file. INgxResult
processing If the file is being processed boolean
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(parsedFileObjINgxResult) {
    this.parsedFile = parsedFileObj.result as INgxCsv | INgxJson | INgxComplexCsv;
  }

CSV

Returns the interface INgxCsv with properties

Property Description
headers Array of strings
data Array of arrays of string

CSV Named Properties

Returns the interface INgxComplexCsv with properties

Property Description
[key: string]: string; Property as definied in the upload CSV

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

Install

npm i ngx-file-parser

DownloadsWeekly Downloads

7

Version

1.0.7

License

MIT

Unpacked Size

271 kB

Total Files

60

Last publish

Collaborators

  • avatar