Getting started with Flatfile in Angular

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

You'll need a license key to continue. Log in to your account to access the flatfile dashboard. Under the Portal section, you'll see a Setup option that will walk you through how to obtain your license key.

Install and import

In the Module

In your Angular Module, you'll need to import the

FlatfileAdapterModule
from the
@flatfile/angular
package.

Then you will need to use it in the imports section of the module, and then you'll be ready to use it within your application.

Once you have this setup, in your app component file, you will be able to import and access the

FlatfileMethods
module for use.

This brings the

FlatfileButton
component into your project.

Configure your settings and usage

To launch, the

flatfile-button
component, you must have a minimum of
settings
,
customer
and
licenseKey
as properties in your AppComponent.

Basic Usage

In your component html code, you will then be able to call the

flatfile-button
component like below.

Here is a list of all the properties that are configurable with the

<flatfile-button>
component. Visit out settings guide to learn about each in greater depth.

  • settings
    - Required - Pass in an object containing the import
    type
    and your
    fields
    . For a list of the other optional settings, check out our options documentation here.
  • customer
    - Required - Pass in an object that identifies the customer uploading the file. This refers the the
    setCustomer()
    function on our SDK, and the same object should be passed in here.
  • licenseKey
    - Required - In order to access our product, a license key is required. The license key can be found in your dashboard by logging in here.
  • onCancel
    - This allows you to pass in a callback function that will run if the user cancels out of the import.
  • onData
    - This allows you to return a new Promise to handle the Flatfile results when returned.
  • onRecordChange
    - This provides access to Flatfile's record hooks when a record changes.
  • onRecordInit
    - This provides access to Flatfile's record hooks when a record initializes.
  • fieldHooks
    - This allows you to pass in one or more field hooks as separate callback functions.
Try our example in CodeSandbox.