Angular

importOK is a reusable custom web component that embeds an import wizard into your app. You can follow this installation guide to use it as an Angular component.

#Installation

The tester version of the importOK JavaScript and Angular components are available on NPM, while the full (paid) versions are hosted in a private repository. Both versions are fully compatible and no code changes are required when upgrading to the full (paid) versions.

1npm install @importok/javascript
2npm install @importok/angular

#Usage

To embed the importOK wizard in your Angular project, simply add the following snippet to your component or page. This will render the interactive import wizard, allowing users to import data seamlessly. For a complete list of configuration options, including available props and event handlers, refer to the Props & Events section of the documentation.

To help you get started, we’ve also prepared a live StackBlitz example you can use as a reference for setting up your configuration.

 1import { Component } from '@angular/core';
 2import { ImportokWizardComponent } from '@importok/angular';
 3import {
 4  ImportConfigFields,
 5  ImportConfigValidators,
 6  ImportConfigTransformers
 7} from '@importok/javascript';
 8 
 9 
10@Component({
11  selector: 'app-root',
12  standalone: true,
13  imports: [ImportokWizardComponent],
14  styleUrl: './app.component.css',
15  template: `<importok-wizard
16    title="Importok Angular Example"
17    [fields]="fields"
18    [transformers]="transformers"
19    [validators]="validators"
20    [recordReady]="saveRecord"
21  />`
22})
23export class AppComponent {
24  /**
25   * Import fields to be mapped
26   * Check https://importok.io/docs/fields for more details
27   */
28  public fields: ImportConfigFields = {};
29 
30  /**
31   * Push the provided record to the API
32   * Check https://importok.io/docs/webhooks for more details
33   */
34  public async saveRecord(record: any, meta: any): Promise<void> {
35    // Implement your logic to save the record
36  };
37 
38  /**
39   * Custom transformers
40   * Check https://importok.io/docs/custom-transformers for more details
41   */
42  public transformers: ImportConfigTransformers = {};
43 
44  /**
45   * Custom validators
46   * Check https://importok.io/docs/custom-validators for more details
47   */
48  public validators: ImportConfigValidators = {};
49}

Note: There is a limit of 20 records for each import with the Tester plan. Additionally, access to custom validators, transformers, and data providers is limited (up to two of each). Once you upgrade to a paid plan, you’ll gain access to the private packages and unlock full functionality with no limitations.