Import wizard
A four-step import for bulk data: choose a CSV, TSV or Excel file, match its columns to your fields, review every row with its problems, and hand the valid records to your code. Files are read in the browser by the spreadsheet engine's own xlsx reader — nothing is uploaded until you send the records yourself.
Columns match by header text (the field key, its label or an alias, ignoring case, accents and punctuation). Each field converts its cells — text, number, date or boolean — and can add its own validate check. It ships as its own entry point of the spreadsheet packages and is covered by the same license.
Getting started
Give fields and listen to (imported). Try the sample files: four rows have problems — a bad email, a salary that is not a number, a missing name and an impossible date.
Import data
- Choose a file
- Match columns
- Review
- Done
Drop a file here, or
CSV, TSV or Excel (.xlsx)
0 records saved
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeImportWizard } from '@oge-ui/spreadsheet/import';
import type { OgeImportEvent, OgeImportField } from '@oge-ui/spreadsheet/import';
interface Employee {
name: string;
email: string;
department: string;
startDate: Date;
salary: number;
active: boolean;
}
@Component({
selector: 'demo-root',
imports: [OgeImportWizard],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- Drop /demo/import/contacts.csv or contacts.xlsx: columns match by
header text (keys, labels, aliases), every row is converted and checked,
and only the valid records reach (imported). Nothing is uploaded. -->
<oge-import-wizard [fields]="fields" (imported)="save($event)" />
<p>{{ saved().length }} records saved</p>
`,
})
export class Demo {
readonly fields: OgeImportField<Employee>[] = [
{ field: 'name', label: 'Full name', required: true },
{
field: 'email',
label: 'Email',
required: true,
validate: (value) =>
String(value).includes('@') ? null : 'Not an email address',
},
{ field: 'department', label: 'Department', aliases: ['Team'] },
{ field: 'startDate', label: 'Start date', type: 'date' },
{ field: 'salary', label: 'Salary', type: 'number' },
{ field: 'active', label: 'Active', type: 'boolean' },
];
readonly saved = signal<readonly Employee[]>([]);
save(event: OgeImportEvent<Employee>): void {
// event.records are typed and checked; send them to your API here
this.saved.set(event.records);
}
}Parsing options
[parse] sets how text cells read: 1.234,50 with a decimal comma, 04.03.2026 day first, and extra words for yes and no. Aliases match the Turkish headers.
Import data
- Choose a file
- Match columns
- Review
- Done
Drop a file here, or
CSV, TSV or Excel (.xlsx)
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeImportWizard } from '@oge-ui/spreadsheet/import';
import type { OgeImportField } from '@oge-ui/spreadsheet/import';
@Component({
selector: 'demo-root',
imports: [OgeImportWizard],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- parse sets how text cells read: "1.234,50" with a decimal comma,
"04.03.2026" day first, and extra words for yes and no. -->
<oge-import-wizard
[fields]="fields"
[parse]="{
decimalSeparator: ',',
dateOrder: 'dmy',
booleanWords: { true: ['aktif'], false: ['pasif'] },
}"
/>
`,
})
export class Demo {
readonly fields: OgeImportField[] = [
{ field: 'sku', label: 'SKU', required: true, aliases: ['Stok kodu'] },
{ field: 'price', label: 'Price', type: 'number', aliases: ['Fiyat'] },
{ field: 'since', label: 'Listed on', type: 'date', aliases: ['Tarih'] },
{ field: 'onSale', label: 'On sale', type: 'boolean', aliases: ['İndirimde'] },
];
}