@csvbox/angular

@csvbox/angular

Angular adapter for csvbox.io

✅ Only for Angular version 8 to 13

⚠️ For Angular version 14 and above, please use @csvbox/angular2 package

Compatibility

Angular Version	Package
8 to 13	@csvbox/angular (this package)
14 to 19	@csvbox/angular2

Shell

npm install @csvbox/angular

Import

Add CSVBoxAngularModule to your module imports

import { CSVBoxAngularModule } from "@csvbox/angular";

@NgModule({
  ...
  imports: [
    ...
    CSVBoxAngularModule
  ]
})

Usage

<csvbox-button [licenseKey]="licenseKey" [isImported]="isImported.bind(this)" [user]="user">Import</csvbox-button>

Example

@Component({
  selector: 'app-root',
  template: `
    <csvbox-button
      [licenseKey]="licenseKey"
      [user]="user"
      [isImported]="isImported.bind(this)">
      Import
    </csvbox-button>
  `
})

export class AppComponent {

  title = 'example';
  licenseKey = 'YOUR_LICENSE_KEY_HERE';
  user = { user_id: 'default123' };

  isImported(result: boolean, data: any) {
    if(result) {
      console.log("Sheet uploaded successfully");
      console.log(data.row_success + " rows uploaded");
    }else{
      console.log("There was some problem uploading the sheet");
    }
  }

}

Events

Event	Description
isReady	Triggers when the importer is initialized and ready for use by the users.
isClosed	Triggers when the importer is closed.
isSubmitted	Triggers when the user hits the 'Submit' button to upload the validated file. data object is available in this event. It contains metadata related to the import.
isImported	Triggers when the data is pushed to the destination. Two objects are available in this event: 1. result (boolean): It is true when the import is successful and false when the import fails. 2. data (object): Contains metadata related to the import.

Readme

For usage see the guide here - https://help.csvbox.io/getting-started#2-install-code

License

MIT © csvbox-io