Angular Data Mapper

Visual data mapping components for Angular applications. Create field mappings between source and target schemas with drag-and-drop, apply transformations, and define JSON schemas visually.

!Angular
!License

Features

$3

- Drag-and-drop field mapping between source and target schemas
- Visual SVG connectors with bezier curves
- Field transformations (uppercase, lowercase, trim, date formatting, etc.)
- Array mapping with filters and selectors
- Default values for unmapped target fields
- Real-time preview with sample data
- Import/export mappings as JSON

$3

- Visual schema builder with nested objects and arrays
- Field types: string, number, boolean, date, object, array
- Required field toggle
- Field descriptions
- Allowed values (enum) support
- Export as valid JSON Schema (draft 2020-12)
- Reorder fields with up/down buttons
- Indent/outdent to restructure hierarchy

Installation

``bash
npm install @expeed/ngx-data-mapper
`

$3

`bash
npm install @angular/cdk @angular/material
`

Quick Start

$3

`typescript
import { Component } from '@angular/core';
import { DataMapperComponent, JsonSchema, FieldMapping } from '@expeed/ngx-data-mapper';

@Component({
standalone: true,
imports: [DataMapperComponent],
template:
[sourceSchema]="sourceSchema"
[targetSchema]="targetSchema"
[sampleData]="sampleData"
(mappingsChange)="onMappingsChange($event)">


})
export class MyComponent {
sourceSchema: JsonSchema = {
name: 'Source',
fields: [
{ id: '1', name: 'firstName', type: 'string', path: 'firstName' },
{ id: '2', name: 'lastName', type: 'string', path: 'lastName' },
]
};

targetSchema: JsonSchema = {
name: 'Target',
fields: [
{ id: '1', name: 'fullName', type: 'string', path: 'fullName' },
]
};

sampleData = { firstName: 'John', lastName: 'Doe' };

onMappingsChange(mappings: FieldMapping[]) {
console.log('Mappings:', mappings);
}
}
`

$3

`typescript
import { Component } from '@angular/core';
import { SchemaEditorComponent, SchemaDefinition } from '@expeed/ngx-data-mapper';

@Component({
standalone: true,
imports: [SchemaEditorComponent],
template:
[schema]="schema"
(schemaChange)="onSchemaChange($event)">


})
export class MyComponent {
schema: SchemaDefinition = { name: 'Customer', fields: [] };

onSchemaChange(updated: SchemaDefinition) {
console.log('Schema:', updated);
}
}
`

Styling with CSS Variables

$3

`css
data-mapper {
--data-mapper-bg: #f8fafc;
--data-mapper-panel-bg: #ffffff;
--data-mapper-text-primary: #1e293b;
--data-mapper-text-secondary: #64748b;
--data-mapper-accent-primary: #6366f1;
--data-mapper-connector-color: #6366f1;
}
`

$3

`css
data-mapper {
--data-mapper-bg: #1e293b;
--data-mapper-panel-bg: #334155;
--data-mapper-text-primary: #f1f5f9;
--data-mapper-text-secondary: #cbd5e1;
--data-mapper-accent-primary: #818cf8;
--data-mapper-connector-color: #818cf8;
}
`

API Reference

$3

| Input | Type | Description |
|-------|------|-------------|
| sourceSchema | JsonSchema | Source schema for mapping |
| targetSchema | JsonSchema | Target schema for mapping |
| sampleData | Record | Sample data for preview |

| Output | Type | Description |
|--------|------|-------------|
| mappingsChange | EventEmitter | Emits when mappings change |

| Method | Description |
|--------|-------------|
| importMappings(json: string) | Import mappings from JSON |
| clearAllMappings() | Remove all mappings |

$3

| Input | Type | Description |
|-------|------|-------------|
| schema | SchemaDefinition | Schema to edit |

| Output | Type | Description |
|--------|------|-------------|
| schemaChange | EventEmitter | Emits on any change |

Exports

$3


- DataMapperComponent
- SchemaEditorComponent
- SchemaTreeComponent
- TransformationPopoverComponent
- ArrayFilterModalComponent
- ArraySelectorModalComponent
- DefaultValuePopoverComponent

$3

- MappingService
- TransformationService
- SvgConnectorService
- SchemaParserService

$3

- JsonSchema, SchemaField, FieldMapping
- SchemaDefinition, EditorField
- TransformationConfig, ArrayMapping, ArrayFilterConfig
- SchemaDocument, ModelRegistry

Requirements

- Angular 21+
- Angular Material 21+
- Angular CDK 21+

Development

`bash


Clone repository

git clone https://github.com/Expeed-Software/angular-data-mapper.git
cd angular-data-mapper
npm install

Build library

npm run build:lib

Start demo app

npm start
``

License

Apache License 2.0