---
title: Angular
section: Guides
description: Step-by-step guide to installing and integrating the importOK component in your Angular project
---

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


  @importok/angular
  angular-component


## Installation

Install both packages:

```bash
npm install @importok/javascript @importok/angular
```

**Note**: The trial version is available on NPM. When you upgrade, you'll get access to our [private packages](/docs/private-packages) with full features. No code changes required.

## Your first importer

Create a basic contact importer:

```jsx
import { Component } from '@angular/core';
import { ImportokWizardComponent } from '@importok/angular';
import { ImportConfigFields } from '@importok/javascript';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ImportokWizardComponent],
  styleUrl: './app.component.css',
  template: ``
})
export class AppComponent {
  public fields: ImportConfigFields = {
    first_name: { label: 'First Name' },
    last_name: { label: 'Last Name' },
    email: { label: 'Email' },
    phone: { label: 'Phone' },
    country: { label: 'Country' }
  };
}
```

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](/docs/transformers):

```javascript
public fields: ImportConfigFields = {
  first_name: {
    label: 'First Name',
    transformers: 'trim|capitalize'  // Built-in transformers
  },
  last_name: {
    label: 'Last Name',
    transformers: 'trim|capitalize'
  },
  email: {
    label: 'Email',
    transformers: 'trim'
  }
};
```

[See all built-in transformers →](/docs/transformers)

### Add validation rules

Catch errors before they reach your API using [validators](/docs/validators):

```jsx
public fields: ImportConfigFields = {
  first_name: {
    label: 'First Name',
    transformers: 'trim|capitalize'
  },
  last_name: {
    label: 'Last Name',
    transformers: 'trim|capitalize',
    validators: 'required'  // Built-in validators
  },
  email: {
    label: 'Email',
    transformers: 'trim',
    validators: 'email|required'
  }
};
```

[See all built-in validators →](/docs/validators)

### Connect to your API

Send validated data to your backend:

```jsx
public async saveRecords(records: any, meta: any): Promise {
  const response = await fetch('/api/contacts/imports', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(record)
  });
    
  return response;
}
```

## Complete example

Here's everything together:

```jsx
import { Component } from '@angular/core';
import { ImportokWizardComponent } from '@importok/angular';
import { ImportConfigFields } from '@importok/javascript';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ImportokWizardComponent],
  styleUrl: './app.component.css',
  template: ``
})
export class AppComponent {
  public fields: ImportConfigFields = {
    first_name: {
      label: 'First Name',
      transformers: 'trim|capitalize'
    },
    last_name: {
      label: 'Last Name',
      transformers: 'trim|capitalize',
      validators: 'required'
    },
    email: {
      label: 'Email',
      transformers: 'trim',
      validators: 'email|required'
    }
  };

  public async saveRecords(record: any, meta: any): Promise {
    const response = await fetch('/api/contacts/imports', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(records)
    });
      
    return response;
  }
}
```

## Next steps

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

- **[Custom validators](/docs/validators)** - Add business-specific validation rules
- **[Custom transformers](/docs/transformers)** - Create domain-specific data cleanup
- **[Data providers](/docs/data-providers)** - Connect dropdowns to your API
- **[Props & events](/docs/component-props-events)** - Customize behavior and styling
- **[Field configuration](/docs/fields)** - Deep dive into field options

## Try it live

Experiment with a complete example in StackBlitz: [Open in StackBlitz →](https://stackblitz.com/github/importok/angular-example?file=src%2Fapp%2Fapp.component.ts)

## 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](/pricing) with access to our [private packages](/docs/private-packages).