Simple Angular component to parse CSV, JSON files
npm install ngx-file-parsernpm install ngx-file-parser --save
yarn add ngx-file-parser
NgxFileParserModule to provide the necessary components and directives.
ts
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
`ts
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
`html
[(config)]="ngxFileParserConfig"
(parsedFile)="handleParsedFile($event)"
>
`
#### 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 |
`ts
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
`ts
handleParsedFile(parsedFileObj: INgxResult) {
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