Embed Flatfile in your Angular application using our Angular SDK. This provides Angular components and services for seamless integration.

​
Installation

npm install @flatfile/angular-sdk

​
Basic Implementation

​
1. Import the Module

Add the SpaceModule to your Angular module:

import { NgModule } from '@angular/core';
import { SpaceModule } from '@flatfile/angular-sdk';

@NgModule({
  imports: [
    SpaceModule,
    // your other imports
  ],
  // ...
})
export class AppModule { }

​
2. Create Component

Create a component to handle the Flatfile embed:

import { Component } from '@angular/core';
import { SpaceService, ISpace } from '@flatfile/angular-sdk';

@Component({
  selector: 'app-import',
  template: `
    <div>
      <h1>Welcome to our app</h1>
      <button (click)="openFlatfile()">Import Data</button>
    </div>
  `
})
export class ImportComponent {
  
  constructor(private spaceService: SpaceService) {}

  spaceProps: ISpace = {
    publishableKey: 'pk_your_publishable_key',
    spaceId: 'us_sp_your_space_id',
    displayAsModal: true
  };

  openFlatfile() {
    this.spaceService.OpenEmbed(this.spaceProps);
  }
}

​
3. Get Your Credentials

  • publishableKey: Get from Platform Dashboard → Developer Settings
  • spaceId: Create a Space in the dashboard, copy the ID from the URL

​
Complete Example

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SpaceModule } from '@flatfile/angular-sdk';

import { AppComponent } from './app.component';

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

// app.component.ts
import { Component } from '@angular/core';
import { SpaceService, ISpace } from '@flatfile/angular-sdk';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>My Application</h1>
      <button (click)="openFlatfile()">Import Data</button>
    </div>
  `
})
export class AppComponent {
  
  constructor(private spaceService: SpaceService) {}

  spaceProps: ISpace = {
    publishableKey: 'pk_your_publishable_key',
    spaceId: 'us_sp_your_space_id',
    displayAsModal: true
  };

  openFlatfile() {
    this.spaceService.OpenEmbed(this.spaceProps);
  }
}

​
Configuration Options

​
ISpace Interface

PropertyTypeRequiredDescription
publishableKeystringYesYour publishable key from the Platform Dashboard
spaceIdstringYesID of the Space to load
displayAsModalbooleanNoShow as modal (true) or inline (false). Default: true

​
Using Space Component Directly

You can also use the flatfile-space component directly in your template:

@Component({
  selector: 'app-import',
  template: `
    <flatfile-space 
      [spaceProps]="spaceProps"
      [showSpace]="showSpace"
      (closeSpace)="onCloseSpace()">
    </flatfile-space>
    <button (click)="toggleSpace()">
      {{ showSpace ? 'Close' : 'Open' }} Import
    </button>
  `
})
export class ImportComponent {
  showSpace = false;
  
  spaceProps: ISpace = {
    publishableKey: 'pk_your_publishable_key',
    spaceId: 'us_sp_your_space_id',
    displayAsModal: true
  };

  toggleSpace() {
    this.showSpace = !this.showSpace;
  }

  onCloseSpace() {
    this.showSpace = false;
  }
}

​
Alternative: Create New Spaces

To create a new Space each time instead of reusing an existing one:

  1. Remove the spaceId property
  2. Add a sheet configuration object
spaceProps: ISpace = {
  publishableKey: 'pk_your_publishable_key',
  sheet: {
    name: "Contacts",
    slug: "contacts", 
    fields: [
      { key: "name", type: "string", label: "Name" },
      { key: "email", type: "string", label: "Email" }
    ]
  },
  displayAsModal: true
};

For detailed workbook configuration, see the Workbook API Reference.

​
TypeScript Support

The Angular SDK is built with TypeScript and includes full type definitions:

import { ISpace, SpaceService } from '@flatfile/angular-sdk';

interface ImportData {
  name: string;
  email: string;
}

@Component({
  // component definition
})
export class ImportComponent {
  spaceProps: ISpace;
  
  constructor(private spaceService: SpaceService) {
    this.spaceProps = {
      publishableKey: 'pk_your_publishable_key',
      spaceId: 'us_sp_your_space_id'
    };
  }
}

​
Next Steps

  • Styling: Customize the embedded experience in your Platform Dashboard Space settings
  • Data Processing: Set up Listeners in your Space for custom data transformations
  • API Integration: Use Flatfile API to retrieve processed data
  • Advanced Configuration: See @flatfile/angular-sdk documentation

​
Example Projects

Angular Example

Complete Angular application with Flatfile embedding