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",
displayAsModal: true,
};
openFlatfile() {
this.spaceService.OpenEmbed(this.spaceProps);
}
}
3. Get Your Credentials
publishableKey: Get from Platform Dashboard → Developer Settings
Authentication & Security: For production applications, implement proper authentication and space management on your server. See Advanced Configuration for authentication guidance.
Complete Example
The example below will open an empty space. To create the sheet your users
should land on, you’ll want to create a workbook as shown further down this
page.
// 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",
displayAsModal: true,
};
openFlatfile() {
this.spaceService.OpenEmbed(this.spaceProps);
}
}
Creating New Spaces
To create a new Space each time:
- Add a
workbook
configuration object. Read more about workbooks here.
- Optionally deploy a
listener
for custom data processing. Your listener will contain your validations and transformations
spaceProps: ISpace = {
publishableKey: "pk_your_publishable_key",
workbook: {
name: "My Import",
sheets: [
{
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.
Reusing Existing Spaces
For production applications, implement proper space management on your server to ensure security and proper access control:
// Frontend Component
@Component({
selector: "app-import",
template: `
<div>
<button (click)="openFlatfile()" [disabled]="loading">
{{ loading ? "Loading..." : "Import Data" }}
</button>
</div>
`,
})
export class ImportComponent {
loading = false;
constructor(private spaceService: SpaceService, private http: HttpClient) {}
async openFlatfile() {
this.loading = true;
try {
// Get space credentials from your server
const response = await this.http
.get<{
publishableKey: string;
spaceId: string;
accessToken?: string;
}>("/api/flatfile/space")
.toPromise();
const spaceProps: ISpace = {
space: {
spaceId: response.spaceId,
accessToken: response.accessToken,
},
displayAsModal: true,
};
this.spaceService.OpenEmbed(spaceProps);
} catch (error) {
console.error("Failed to load Flatfile space:", error);
} finally {
this.loading = false;
}
}
}
For server implementation details, see the Server Setup guide.
Configuration Options
For detailed configuration options, authentication settings, and advanced features, see the Advanced Configuration guide.
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",
displayAsModal: true,
};
toggleSpace() {
this.showSpace = !this.showSpace;
}
onCloseSpace() {
this.showSpace = false;
}
}
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
Quick Links
Example Projects