Skip to main content

Angular Quickstart

tip

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

Installation

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

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"
>
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);
};

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',
};
}