Angular CSV importer

Install

npm install @csvjetty/angular

Receive imported records

Create an importer in the dashboard and use its public importer key. This example displays records in memory. Replace the callback with your authenticated API call to save records.

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">Import contacts</csvjetty-importer>    <pre>{{ records() }}</pre>  `,})export class ContactImportComponent {  readonly records = signal('[]');  readonly receiveData: DataHandler = ({ rows }) => {    this.records.set(JSON.stringify(rows, null, 2));  };}

Bind onData as a function input. It may return a promise. Return nothing for success, return row errors for individual failures, or throw to report a failed save. Use an arrow function to preserve your component context.

Configuration and lifecycle

Inputs include importerKey, demo, columns, onData, autoOpen, disabled, accentColor, baseUrl and previewToken. Set demo to true instead of importerKey for the built-in contacts demo. Outputs are complete, closed and openError. Webhook delivery is configured in the dashboard.

A template ref exposes open(), close(), isOpen() and error(). Close respects busy state 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.