> ## Documentation Index
> Fetch the complete documentation index at: https://developer.dromo.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular Quickstart

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

## Step By Step Guide

Our SDK for Angular currently supports Angular versions 13-17. Have a look at our [live example](https://codesandbox.io/s/dromo-developer-demo-angular-wbxuzt?file=/src/app/dromo-importer/dromo-importer.component.ts) for inspiration.

<Steps>
  <Step title="Installation">
    To install the Dromo Angular SDK in your application, just install the NPM package `dromo-uploader-angular`.

    <CodeGroup>`bash Terminal npm install dromo-uploader-angular `</CodeGroup>

    Then, add the `DromoUploaderModule` to your imports.

    <CodeGroup>
      ```typescript app.module.ts theme={null}
      // app.module.ts
      import { NgModule } from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
      import { DromoUploaderModule } from 'dromo-uploader-angular';
      import { AppComponent } from './app.component'; // Assuming AppComponent is in app.component.ts

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

      ```
    </CodeGroup>
  </Step>

  <Step title="Usage">
    The `DromoUploaderModule` provides the `lib-dromo-uploader` component. You can create a wrapper component to provide its configuration.
    Below are examples of how you might set up your component: one for a full manual configuration, and another using a schema defined in Dromo's Schema Studio.

    <CodeGroup>
      ```typescript "my-uploader.component.ts (Manual Setup)" theme={null}
      // my-uploader.component.ts
      import { Component } from '@angular/core';
      import {
        DromoMethods,
        IColumnHook,
        IColumnHookInput,
        IRowDeleteHook,
        IRowHook,
        IStepHook,
        IUploadStepData,
        IBulkRowHook,
        IBeforeFinishCallback
      } 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);
              return values.map(({ value, index }) => ({ value: index + value, index }));
            }
          }
        ];
        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'
        };
      }
      ```

      ```typescript "my-uploader.component.ts (Schema Studio)" theme={null}
      // 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"
            [schemaId]="schemaId"
            [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 {
        schemaId = "00000000-0000-0000-0000-000000000000";
        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",
        };
      }
      ```
    </CodeGroup>
  </Step>
</Steps>