Skip to main content

Angular Quickstart

tip

Are you looking for a framework other than Angular? Check the Getting Started guides in the sidebar.

Overview

Our SDK for Angular currently supports Angular versions 13-17.

Have a look at our live example for inspiration.

Installation

To install the Dromo Angular SDK in your application, just install the NPM package dromo-uploader-angular.

npm install dromo-uploader-angular

Then, add the DromoUploaderModule to your imports.

app.module.ts
import { DromoUploaderModule } from 'dromo-uploader-angular';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, DromoUploaderModule],
providers: [],
bootstrap: [AppComponent],
})

export class AppModule {}

Usage

The DromoUploaderModule provides the Dromo Uploader component, with the selector lib-dromo-uploader.

You may create a wrapper component which provides the Dromo Uploader component with your configuration.

my-uploader.component.ts
import { Component } from '@angular/core';
import {
DromoMethods,
IColumnHook,
IRowDeleteHook,
IRowHook,
IStepHook,
IUploadStepData,
} from 'dromo-uploader-angular';

@Component({
selector: 'my-uploader',
template: `
<lib-dromo-uploader
[licenseKey]="licenseKey"
[user]="user"
[fields]="fields"
[settings]="settings"
[rowHooks]="rowHooks"
[columnHooks]="columnHooks"
[stepHooks]="stepHooks"
[rowDeleteHooks]="rowDeleteHooks"
[styles]="styles"
[class]="class"
class="dromo-importer"
[onCancel]="onCancel"
[onResults]="onResults"
[beforeFinish]="beforeFinish"
[bulkRowHooks]="bulkRowHooks">
Import with Dromo!
</lib-dromo-uploader>
`
})

export class MyUploader implements DromoMethods {
licenseKey = 'YOUR_LICENSE_KEY_HERE';

user = { id: 'angular tester' };

fields = [
{ label: 'first name', key: 'first_name' },
{ label: 'email address', key: 'email' },
];

settings = {
importIdentifier: 'angular imports',
developmentMode: true,
};

rowHooks: IRowHook[] = [
(record) => {
const newRecord = { ...record };
newRecord.row['first_name'].value =
record.row['first_name'].value + '!!!';
return newRecord;
},
];

rowDeleteHooks: IRowDeleteHook[] = [
(record) => alert(`deleted ${record.index}`),
];

columnHooks: IColumnHook[] = [
{
fieldName: 'email',
callback: (values: IColumnHookInput[]) => {
console.log('COLUMN HOOK', values);
values = values.map(({ value, index }) => ({
value: index + value,
index,
}));
return values;
},
},
];

stepHooks: IStepHook[] = [
{
type: 'UPLOAD_STEP',
callback: (uploader, data) => {
console.log(
'STEP HOOK',
`Filename: ${(data as IUploadStepData).filename}`
);
},
},
];

onCancel = () => alert('Something I said?');

onResults = (data: any[], metaData: any) => {
alert(`Submitted ${data.length} records`);
console.table(data);
console.log('MetaData', metaData);
};

bulkRowHooks: IBulkRowHook[] = [
(data, _mode) => {
console.log("in the bulk row hook!");
return data;
}
];

beforeFinish: IBeforeFinishCallback = (data, metaData, _instance) => {
console.log(`${data.length} total rows!`);
if (metaData.rowsWithError.length > 10) {
return {
cancel: true,
message: "More than ten errors, fix them first!"
};
}
return undefined;
};

class = 'dromo-button';

styles = {
'background-color': 'rgb(0, 123, 255)',
border: '1px solid rgb(0, 123, 255)',
'border-radius': ' 0.25rem',
color: 'white',
padding: '15px',
'text-align': 'center',
'text-decoration': 'none',
display: 'inline-block',
'font-size': '16px',
'box-shadow': '5px 5px 5px 0px #7F7F7F',
};
}

Usage: Schema Studio

my-uploader.component.ts
// my-uploader.component.ts
import { Component } from "@angular/core";
import {
IUser,
IBeforeFinishCallback,
DromoSavedSchemaMethods
} from "dromo-uploader-angular";
@Component({
selector: "app-dromo-importer",
template: `
<lib-dromo-uploader
[licenseKey]="licenseKey"
[schemaName]="schemaName"
[user]="user"
[styles]="styles"
[class]="class"
[onCancel]="onCancel"
[onResults]="onResults"
[beforeFinish]="beforeFinish"
[developmentMode]="developmentMode"
class="dromo-importer"
>Import with Dromo!</lib-dromo-uploader
>
`,
styleUrls: ["./dromo-importer.component.css"]
})
export class DromoImporterComponent implements DromoSavedSchemaMethods {
schemaName = "demo";
licenseKey = "<YOUR LICENSE KEY>";
user: IUser = { id: "angular tester" };
developmentMode = true;
onCancel = () => alert("Something I said?");
onResults = (data: any[], metaData: any) => {
alert(`Submitted ${data.length} records`);
console.table(data);
console.log("MetaData", metaData);
};

beforeFinish: IBeforeFinishCallback = (data, metaData, _instance) => {
console.log(`${data.length} total rows!`);
if (metaData.rowsWithError.length > 2) {
return { cancel: true, message: "More than two errors, fix them first!" };
}
return undefined;
};
class = "dromo-button";
styles = {
"background-color": "rgb(0, 123, 255)",
border: "1px solid rgb(0, 123, 255)",
"border-radius": " 0.25rem",
color: "white",
padding: "15px",
"text-align": "center",
"text-decoration": "none",
display: "inline-block",
"font-size": "16px",
"box-shadow": "5px 5px 5px 0px #7F7F7F"
};

ngOnInit(): void {}
}