A declarative CSV importer for Angular.
Import the module, drop <csvbox-button> in your template, and bind the inputs you already know. @csvbox/angular covers Angular 12 and above, and a drop-in sibling package covers Angular 8 through 11 with identical inputs.
- Under 10 lines to first import
- Validated rows only
- SOC 2 Type II + GDPR
npm install @csvbox/angularimport { CSVBoxAngularModule } from '@csvbox/angular';
@NgModule({
imports: [CSVBoxAngularModule]
})
export class AppModule {}
@Component({
selector: 'app-root',
template: `
<csvbox-button
[licenseKey]="licenseKey"
[user]="user"
[imported]="imported.bind(this)">
Import
</csvbox-button>
`
})
export class AppComponent {
licenseKey = 'YOUR_LICENSE_KEY_HERE';
user = { user_id: 'default123' };
imported(result: boolean, data: any) {
if (result) {
console.log(data.row_success + " rows uploaded");
} else {
console.log("There was some problem uploading the sheet");
}
}
}Angular teams tend to build the importer themselves, because the file-upload half looks easy. The half that is not easy is everything after the upload: mapping the user’s headers onto your model, coercing types, validating every row, and giving a non-technical user a way to fix the twelve rows that failed without starting over.
CSVbox handles that entire middle section as a hosted service. The Angular SDK’s only job is to render a button and emit the result, which keeps the integration surface to one module import and one element.
The component takes bracketed inputs, so it reads like any other Angular component in your template and slots into whatever your app already does for state.
- Angular 12+ via @csvbox/angular, Angular 8–11 via @csvbox/angular_8
- Declarative <csvbox-button> with bracketed inputs — no imperative wiring
- Callbacks for the full modal lifecycle, not just the final result
- Validation rules live in the dashboard, so schema changes skip the build
How it works
- 1Install for your Angular version
On Angular 12 and above, run npm install @csvbox/angular. On Angular 8 through 11, install @csvbox/angular_8 instead — the inputs and the behaviour are identical.
- 2Import the module
Add CSVBoxAngularModule to the imports array of the NgModule that owns your importer, exactly as you would any other feature module.
- 3Add the component
Drop <csvbox-button> into your template and bind [licenseKey], [user], and your [imported] handler.
- 4Handle the result
Your imported() method receives (result, data). Bind the method with .bind(this) so it keeps your component context, then refresh your view from the row counts.
Angular 12+. On Angular 8–11, install @csvbox/angular_8 instead — same inputs, same behaviour.
csvbox-button inputs
| Input | Type | What it does |
|---|---|---|
licenseKey | string | The sheet key from your CSVbox dashboard. Required. |
user | object | Attributes attached to the import. user_id is mandatory; anything else is echoed back to your destination. |
imported | function | Fires when an import finishes. Receives (result, data). Bind it with .bind(this) to keep component context. |
options | object | Per-import overrides — row limits, language, theme, custom request headers, and more. |
lazy | boolean | Defer loading the importer until the button is clicked. |
importerReady | function | Fires when the importer is loaded and ready to open. |
loadStarted | function | Fires once the importer bundle begins loading. |
submitted | function | Fires when the user submits their file, before processing completes. |
closed | function | Fires when the user dismisses the modal. |
Styling the button
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
template: `
<csvbox-button
class="import-btn"
[licenseKey]="licenseKey"
[user]="user"
[lazy]="true"
[imported]="imported.bind(this)">
Import customers
</csvbox-button>
`,
styles: [`
.import-btn button {
background: #007bff;
color: #fff;
border-radius: 8px;
padding: 10px 18px;
}
`]
})
export class AppComponent {
licenseKey = 'YOUR_LICENSE_KEY_HERE';
user = { user_id: 'default123' };
imported(result: boolean, data: any) {
if (result) {
console.log(data.row_success + " rows uploaded");
}
}
}Pass your class to <csvbox-button> and set ViewEncapsulation.None on the component so your styles reach the rendered button. Without it, Angular’s scoped styles will not apply.
Which package for which Angular
Two packages cover the supported range. Both expose the same module, the same element, and the same inputs — only the peer dependency differs.
Install @csvbox/angular. This is the current package and the one the examples above use.
Install @csvbox/angular_8. Identical inputs and behaviour, built against the older peer range.
Add CSVBoxAngularModule to the imports array of the standalone component instead of an NgModule.
The importer is browser-only. Guard the render on isPlatformBrowser so it never runs during server rendering.
Common use cases
New customers arrive with years of records in a spreadsheet. Give them a validated self-serve path instead of a professional-services ticket.
Internal teams load batches of records — employees, assets, invoices — without a developer running a script.
A supplier uploads a price list every week; CSVbox validates it and routes clean rows to your backend automatically.
Accept exports from the tool you are replacing and map their headers onto your schema without a bespoke parser per customer.
Angular import questions, answered
Which Angular versions are supported?
Angular 8 and above. Install @csvbox/angular for Angular 12 and later; for Angular 8 through 11, install @csvbox/angular_8 instead. The inputs and behaviour are identical, so moving between them is a package swap.
Why are my styles not reaching the button?
Angular scopes component styles by default. Set encapsulation to ViewEncapsulation.None on the component and pass your class to <csvbox-button> so your rules apply to the rendered element.
Why does the imported callback need .bind(this)?
The callback is invoked by the SDK rather than by Angular’s template, so it does not automatically carry your component instance. Binding it keeps this pointing at your component so you can update state from inside the handler.
Does it work with standalone components?
Yes. Add CSVBoxAngularModule to the standalone component’s own imports array rather than to an NgModule — everything else is unchanged.
What about Angular Universal and server-side rendering?
The importer only runs in the browser. Guard the component with isPlatformBrowser so it is skipped during server rendering and mounts after hydration.
Do I need to redeploy when my columns change?
No. Columns, data types, and validation rules are configured in the CSVbox dashboard. Change them there and the importer updates without a new Angular build.
Angular picks the SDK. Your back end picks the destination.
The SDK you install has nothing to do with where the data lands. Whatever you run server-side — Node, Rails, Django, Laravel, Go, .NET, or no server at all — CSVbox delivers validated rows to your webhook, database, or no-code tool.