@csvbox/angular2

> Standalone Angular component for csvbox.io supporting Angular version 14 and above

✅ Only for Angular version 14 and above

⚠️ For Angular version 13 or less, please use @csvbox/angular package

 

Compatibility

| Angular Version | Package |
| ------ | ------ |
|8 to 13|@csvbox/angular|
|14 and above|@csvbox/angular2 (this package)|

Shell

``bash
npm install @csvbox/angular2
`

Import

Add CSVBoxButtonComponent to your module imports
`ts
import { CSVBoxButtonComponent } from "@csvbox/angular2";

@NgModule({
...
imports: [
...
CSVBoxButtonComponent
]
})
`

Usage

`html
Import
`

Example

`ts

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


})

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