@flatfile/angular

Flatfile Angular Component - @flatfile/angular

We've made it really simple for you to get started with Flatfile with our new Flatfile Component. Here's what you'll need to know to get started.

First, install the dependency via npm:

npm install @flatfile/angular

This will give you access to the <flatfile-button /> component as well as the same basic functionality as our Adapter.

The flatfile-button usage

import { FlatfileAdapterModule } from '@flatfile/angular';

// Add to your Modules imports: []
imports: [
  FlatfileAdapterModule
]

// Within a Components template use the flatfile-button

@Component({
  template: `
    <flatfile-button
      [settings]="settings"
      [customer]="customer"
      [licenseKey]="licenseKey"
      [fieldHooks]="fieldHooks"
      [(data)]="onData"
      [(recordInit)]="onRecordInit"
      [(recordChange)]="onRecordChange"
      (cancel)="onCancel()">
      This text is coming from the end-user of this component
    </flatfile-button>
  `
}) export class MyDemoComponent {
  
  customer = { userId: '12345' };
  licenseKey = '4171f0b4-5f5c-4b32-a008-356ebb813e4e';
  settings = {
    type: 'test import',
    fields: [
      { label: 'Name', key: 'name' },
      { label: 'Email', key: 'email' },
    ],
  };

  /*
   * @Input()'s
   */
  public fieldHooks: Record<string, FieldHookCallback> = {
    email: (values) => {
      return values.map(([item, index]) => [
        { value: item + '@', info: [{message: 'added @ after the email', level: 'warning'}] },
        index
      ]);
    }
  };

  /*
   * 2-way binding handlers
   */
  onData(results: FlatfileResults): Promise<string> {
    let errorState = false;
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (errorState) {
          reject('rejected - this text is controlled by the end-user');
          errorState = false;
        } else {
          resolve('Flatfile upload successful - this text is controlled by the end-user');
        }
      }, 3000);
    });
  }

  onRecordInit(record: ScalarDictionaryWithCustom, index: number): IDataHookResponse | Promise<IDataHookResponse> {
    return {
      email: {
        value: record.email + '@',
        info: [{ message: 'added @ on init', level: 'info' }]
      }
    };
  }

  onRecordChange(record: ScalarDictionaryWithCustom, index: number): IDataHookResponse | Promise<IDataHookResponse> {
    return {
      email: {
        value: record.email + '#',
        info: [{ message: 'added # on change', level: 'warning' }]
      }
    };
  }

  /*
   * @Output() handlers
   */
  onCancel(): void {
    console.log('canceled!');
  }
}

flatfile-button options	Info	Example
settings - This is where you will pass your Flatfile settings/options.	**Required. ** object	settings={{ type: "Customers", fields: [ {key: "name", label: "Name"}, {key: "email", label: "Email"} ]}}
customer - Refers to the setCustomer function.	Required. object - CustomerObject	customer={{ usedId: "1234", companyId: "12", companyName: "ABC", email: "[e-mail]", name: "John Doe" }}
licenseKey - Your Flatfile license key can be found in your dashboard when you login here.	Required. string	licenseKey={'ah12-alksjs2738-shdkaj123'}
onCancel - An optional callback for handling a user cancelling.	Optional. function - callback	onCancel={() => { // do something }}
onData- An optional way to use FlatfileResults to return a new Promise.	Optional. function	onData={async results => // do something}
onRecordChange- An optional way to use registerRecordHook when a record changes.	Optional. function	onRecordChange={(data, index) => IDataHookResponse | Promise<IDataHookResponse>}
onRecordInit- An optional way to use registerRecordHook on initialization.	Optional. function	onRecordInit={(data, index) => IDataHookResponse | Promise<IDataHookResponse>}
fieldHooks- An optional way to pass in one or more callback functions to use with registerFieldHook.	Optional. object function(s) - callback(s)	fieldHooks={ fieldName: (values) => { return // [IDataHookRecord, index][]}
render- An optional way to pass in your own elements to render inside the FlatfileButton Component.	Optional. function	render={ (FlatfileImporter, launch) => return ReactElement}

Try our example in CodesandBox.