@getnuvo/importer-angular

> [!NOTE]
> The @getnuvo/importer-angular package is the successor to our previous nuvo-angular package.
> While you can continue using versions 2.x of nuvo-angular, we recommend migrating to
> @getnuvo/importer-angular version 3.x to take advantage of the latest features and improvements.

nuvo Data Importer Angular SDK

nuvo leverages AI to simplify importing complex and unstructured files into your application.

Integrate the nuvo Data Importer to offer your customers an intuitive and efficient data import experience.

Features

- AI-Powered Column and Option Mapping: Automatically matches imported data columns to your system's target data model, streamlining the import process.
- Customizable Cleaning Functions: Implement custom logic to validate and transform data during the import workflow.
- Support for Multiple File Formats: Handles various file types, including CSV, TSV, XLS, XLSX, JSON, XML, and PDF.
- Dynamic Import Capabilities: Initiate the import process from any step, accommodating diverse data sources and workflows.
- Styling and Theming: Easily adjust the importer's appearance to align with your application's design.
- Multi-language Support: Customize and localize interface text to cater to a global user base.
- Wide Angular Version Support: Compatible with Angular 12 through Angular 21, including support for zoneless change detection.

Getting Started

Ensure you have signed up on our User Platform and have access to your nuvo license key.

$3

Add nuvo to your project:

npm:

``bash
npm install @getnuvo/importer-angular
`

yarn:

`bash
yarn add @getnuvo/importer-angular
`

$3

Below is a basic example of integrating the NuvoImporter component into your Angular application:

Add the NuvoImporter module to module file

`ts
import { NuvoImporterModule } from '@getnuvo/importer-angular';

@NgModule({
declarations: [AppComponent],
imports: [NuvoImporterModule, BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
`

Add the nuvo component in the HTML file.

`html
[licenseKey]="licenseKey"
[settings]="settings"
[onResults]="onResults.bind(this)"
/>
`

Define the property in the component file.

`ts
export class AppComponent implements OnInit {
settings!: SettingsAPI;
licenseKey!: string;

ngOnInit(): void {
this.licenseKey = 'Your License Key';
this.settings = {
identifier: 'product_data',
columns: [
{
label: 'Product ID',
key: 'product_id',
},
{
label: 'Article Name',
key: 'article_name',
},
],
};
}

onResults(results, errors, complete, logs) {
console.log('Imported Data:', results);
console.log('Errors:', errors);
console.log('Import Logs:', logs);
complete(); // Finalize the import process
}
}
`

In this example:

- licenseKey: Your unique nuvo license key.
- settings: Configuration object for the importer.
- identifier: A unique string to identify the import instance.
- columns: Defines the target data model (TDM) with label and key for each column.
- onResults: Callback function that handles the imported data results.

For a comprehensive guide on setting up and customizing the importer, refer to the First Steps documentation.

Advanced Configuration

$3

The settings property allows you to tailor the importer's behavior and appearance. Key configurable options include:

- inputTypes: Specify supported file types (e.g., ['csv', 'xls', 'json']).
- modal: Determine whether the importer operates within a modal (true) or inline (false).

For a detailed list of configuration options, visit the Settings & Configuration page.

$3

Define the structure of the data you expect using the columns array within the settings. Each column can include:

- label: User-friendly name displayed in the UI.
- key: Technical identifier for the column.
- description: Additional information about the column.
- alternativeMatches: Array of synonyms or abbreviations to assist the mapping algorithm.
- validations: Rules such as required fields, uniqueness, regex patterns, and cross-column dependencies.

Learn more about defining your TDM in the Columns / Target Data Model documentation.

$3

Implement custom cleaning & data handler functions (callback functions) to transform and validate data during the import process. These functions can correct date formats, enrich entries, compare imported data against external databases, and more.

Explore the capabilities of these functions in the Cleaning Functions & Data Handler docs.

$3

The dynamic import feature allows you to start the import process from any step and with various data formats. This flexibility enables integration with different workflows and data sources.

For implementation details, refer to the Dynamic Import documentation.

$3

Customize the appearance of the nuvo importer to match your application's design. Modify themes, adjust display modes, and enable or disable specific features to create a seamless user experience.

Learn more about styling options in the Styling section.

$3

The i18nOverrides and language feature allow you to customize and localize the application's default language keys, ensuring the importer aligns with your users' language preferences.

For more information on localization, visit the Multi-language Support & Language page.

Handling Results

The onResults` callback function provides access to the cleaned data, allowing you to define how to process and store it.

Detailed information on handling results can be found in the Result (Output) documentation.

Release Notes

Stay updated with the latest features, improvements, and bug fixes by reviewing our Release Notes.

Learn More

Explore how to get the most out of nuvo with real examples and detailed guides:

- Try it live on CodeSandbox – test and tweak the importer in action.
- Visit our Knowledge Base for deep dives into settings, data models, cleaning functions, and more.

Support

If you have any questions or need assistance, please refer to our FAQ or contact our support team at support@ingestro.com.