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
Property | Type | Required | Description |
---|
publishableKey | string | Yes | Your publishable key from the Platform Dashboard |
spaceId | string | Yes | ID of the Space to load |
displayAsModal | boolean | No | Show 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:
- Remove the
spaceId
property
- 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