# CSVJetty for Angular

CSV upload, column mapping, validation, and inline correction inside your app. Receive records in a browser callback or deliver them to a configured webhook.

[Try the demo](https://www.csvjetty.com/demo) · [Watch the importer](https://www.csvjetty.com/ImporterDemo.mp4) · [Configure an importer](https://www.csvjetty.com/dashboard)

## Install

```sh
npm install @csvjetty/angular
```

Requires Angular 20–22. Import the standalone component in your component or NgModule.

## Quick start

Create an importer in the dashboard and copy its public importer key. This example displays received records in memory; it does not save them to a database.

```ts
import { Component, signal } from '@angular/core';
import { CSVJettyComponent, DataHandler } from '@csvjetty/angular';

@Component({
  selector: 'app-contact-import',
  standalone: true,
  imports: [CSVJettyComponent],
  template: `
    <csvjetty-importer
      importerKey="YOUR_PUBLIC_IMPORTER_KEY"
      [onData]="receiveData"
      (complete)="status.set($event.accepted + ' accepted')">
      Import contacts
    </csvjetty-importer>
    <p role="status">{{ status() }}</p>
    <pre>{{ records() }}</pre>
  `,
})
export class ContactImportComponent {
  readonly records = signal('[]');
  readonly status = signal('');
  readonly receiveData: DataHandler = ({ rows }) => {
    this.records.set(JSON.stringify(rows, null, 2));
  };
}
```

Use `[demo]="true"` instead of `importerKey` to try the built-in contacts importer without an account.

## API

| Input | Purpose |
| --- | --- |
| `importerKey` | Public importer UUID; required unless `demo` is true |
| `demo` | Open the built-in contacts demo; default false |
| `columns` | Optional field definitions and synchronous validators |
| `onData` | Function input that receives callback records |
| `autoOpen` | Open once during browser initialization and hide the button |
| `disabled` | Disable the launch button |
| `accentColor` | Launch-button color; default `#245a44` |
| `baseUrl` | Service origin; default `https://www.csvjetty.com` |
| `previewToken` | Dashboard preview token; normally omitted |

Bind `[onData]` to a function, not an output event: the SDK needs its return value to confirm delivery. Use an arrow function to preserve your component's `this` binding. The handler may return a promise.

| Output | Payload |
| --- | --- |
| `(complete)` | `{ importId, accepted, rejected }` |
| `(closed)` | Normal close; not component destruction |
| `(openError)` | Opening/configuration failure; save errors appear in the importer |

Projected content supplies button text. A template ref exposes `open()`, `close()`, `isOpen()` and `error()`. Closing is blocked while busy and asks before discarding unsaved changes. Destroying the component removes the importer without cancelling a save already running in your app. Server initialization does not open the importer. Configuration changes apply on the next opening; handlers use current input values.

### Save records

Replace the example handler with your authenticated API call. Validate records on the server and use `importId` and `rowNumbers` to make repeated deliveries safe.

Return nothing for success, or `{ errors: [{ row: 2, message: "Email already exists" }] }` to reject individual records. Throw or reject the promise to report a failed save. For webhook delivery, configure an HTTPS endpoint in the dashboard and omit `onData`.

With callback delivery, CSV row data stays in the browser until your app handles it; CSVJetty receives configuration and import metadata. Webhook delivery sends records through CSVJetty for delivery and retries. Original uploaded files are not stored by CSVJetty.

## Documentation

- [Columns and custom validation](https://www.csvjetty.com/docs/columns)
- [Callback payloads and row errors](https://www.csvjetty.com/docs/callbacks)
- [Signed webhooks](https://www.csvjetty.com/docs/webhooks)
- [Requirements and limits](https://www.csvjetty.com/docs/reference/limits)

## Other integrations

| Framework | Package |
| --- | --- |
| React / Next.js | `csvjetty` |
| JavaScript / HTML | `@csvjetty/js` |
| Vue 3 | `@csvjetty/vue` |
| Angular | `@csvjetty/angular` |

## License

MIT. See [LICENSE](./LICENSE). The SDK license does not cover the hosted CSVJetty service.