Angular

Add a complete CSV and Excel importer to your Next.js app, with column mapping, real-time validation, and API integration built in.

Installation

Install both packages:

1npm install @importok/javascript @importok/angular

Note: The trial version is available on NPM. When you upgrade, you'll get access to our private packages with full features. No code changes required.

Your first importer

Create a basic contact importer:

 1import { Component } from '@angular/core';
 2import { ImportokWizardComponent } from '@importok/angular';
 3import { ImportConfigFields } from '@importok/javascript';
 4 
 5@Component({
 6  selector: 'app-root',
 7  standalone: true,
 8  imports: [ImportokWizardComponent],
 9  styleUrl: './app.component.css',
10  template: `<importok-wizard
11    title="Import Contacts"
12    [fields]="fields"
13  />`
14})
15export class AppComponent {
16  public fields: ImportConfigFields = {
17    first_name: { label: 'First Name' },
18    last_name: { label: 'Last Name' },
19    email: { label: 'Email' },
20    phone: { label: 'Phone' },
21    country: { label: 'Country' }
22  };
23}

That's it. Users can now upload CSV or Excel files and map columns to your fields.

Make it production-ready

Add data transformations

Clean up data before validation using transformers:

 1public fields: ImportConfigFields = {
 2  first_name: {
 3    label: 'First Name',
 4    transformers: 'trim|capitalize'  // Built-in transformers
 5  },
 6  last_name: {
 7    label: 'Last Name',
 8    transformers: 'trim|capitalize'
 9  },
10  email: {
11    label: 'Email',
12    transformers: 'trim'
13  }
14};

See all built-in transformers →

Add validation rules

Catch errors before they reach your API using validators:

 1public fields: ImportConfigFields = {
 2  first_name: {
 3    label: 'First Name',
 4    transformers: 'trim|capitalize'
 5  },
 6  last_name: {
 7    label: 'Last Name',
 8    transformers: 'trim|capitalize',
 9    validators: 'required'  // Built-in validators
10  },
11  email: {
12    label: 'Email',
13    transformers: 'trim',
14    validators: 'email|required'
15  }
16};

See all built-in validators →

Connect to your API

Send validated data to your backend:

1public async saveRecords(records: any, meta: any): Promise<void> {
2  const response = await fetch('/api/contacts/imports', {
3    method: 'POST',
4    headers: { 'Content-Type': 'application/json' },
5    body: JSON.stringify(record)
6  });
7 
8  return response;
9}

Complete example

Here's everything together:

 1import { Component } from '@angular/core';
 2import { ImportokWizardComponent } from '@importok/angular';
 3import { ImportConfigFields } from '@importok/javascript';
 4 
 5@Component({
 6  selector: 'app-root',
 7  standalone: true,
 8  imports: [ImportokWizardComponent],
 9  styleUrl: './app.component.css',
10  template: `<importok-wizard
11    title="Import Contacts"
12    [fields]="fields"
13    [importReady]="saveRecords"
14  />`
15})
16export class AppComponent {
17  public fields: ImportConfigFields = {
18    first_name: {
19      label: 'First Name',
20      transformers: 'trim|capitalize'
21    },
22    last_name: {
23      label: 'Last Name',
24      transformers: 'trim|capitalize',
25      validators: 'required'
26    },
27    email: {
28      label: 'Email',
29      transformers: 'trim',
30      validators: 'email|required'
31    }
32  };
33 
34  public async saveRecords(record: any, meta: any): Promise<void> {
35    const response = await fetch('/api/contacts/imports', {
36      method: 'POST',
37      headers: { 'Content-Type': 'application/json' },
38      body: JSON.stringify(records)
39    });
40 
41    return response;
42  }
43}

Next steps

Now that you have a working importer, explore advanced features:

• Custom validators - Add business-specific validation rules
• Custom transformers - Create domain-specific data cleanup
• Data providers - Connect dropdowns to your API
• Props & events - Customize behavior and styling
• Field configuration - Deep dive into field options

Try it live

Experiment with a complete example in StackBlitz: Open in StackBlitz →

Trial limitations

The free trial includes:

• ✅ Full UI and mapping features
• ✅ Built-in validators and transformers
• ⚠️ 20 records per import (unlimited on paid plans)
• ⚠️ Up to 2 custom validators (unlimited on paid plans)
• ⚠️ Up to 2 custom transformers (unlimited on paid plans)
• ⚠️ Up to 2 data providers (unlimited on paid plans)

When you're ready, upgrade to unlock full features with access to our private packages.