Create a new Space every time Flatfile is opened.
For synchronous data import/exchange completed in one session, create a new Space each time Flatfile is opened. This suits situations where a clean slate for every interaction is preferred.
To complete this tutorial, you'll need to retrieve your Publishable
key from your development
environment.
Note: The Publishable Key is safe to be used in client-side applications as it has limited access to the Flatfile API.
Follow prompts from the new
command.
In your app.component.ts
you’ll need to pass in a minimum of the publishableKey
.
Now, start your front end by heading to the terminal and running the following command.
Now, let’s build a Workbook inside the Space for next time.
Add your config.ts
file, and place the following code in it. After you have done so, import the configuration to app.component.ts
, and update spaceProps
to have the value of config
under workbook
. This config file has the configuration settings for your workbook, so feel free to edit however necessary to meet your needs.
Next, we’ll listen for data changes and respond using an event listener.
src/listeners/listener.ts
file with this simple recordHook
.app.component.ts
to import the listener.Once you add this code, when a change occurs, we’ll log the entered first name and update the last name to “Rock.” You’ll immediately see this begin to work when you add or update any records. Learn more about Handling Data
By attaching a themeConfig
to spaceProps
, we will now override colors in your Space to match your brand. See all of the options here in the Theming Reference.
You can stop here or you can view our full reference to see all the ways you can customize your importer.
Find this Angular example project in the Flatfile GitHub repository.
Create a new Space every time Flatfile is opened.
For synchronous data import/exchange completed in one session, create a new Space each time Flatfile is opened. This suits situations where a clean slate for every interaction is preferred.
To complete this tutorial, you'll need to retrieve your Publishable
key from your development
environment.
Note: The Publishable Key is safe to be used in client-side applications as it has limited access to the Flatfile API.
Follow prompts from the new
command.
In your app.component.ts
you’ll need to pass in a minimum of the publishableKey
.
Now, start your front end by heading to the terminal and running the following command.
Now, let’s build a Workbook inside the Space for next time.
Add your config.ts
file, and place the following code in it. After you have done so, import the configuration to app.component.ts
, and update spaceProps
to have the value of config
under workbook
. This config file has the configuration settings for your workbook, so feel free to edit however necessary to meet your needs.
Next, we’ll listen for data changes and respond using an event listener.
src/listeners/listener.ts
file with this simple recordHook
.app.component.ts
to import the listener.Once you add this code, when a change occurs, we’ll log the entered first name and update the last name to “Rock.” You’ll immediately see this begin to work when you add or update any records. Learn more about Handling Data
By attaching a themeConfig
to spaceProps
, we will now override colors in your Space to match your brand. See all of the options here in the Theming Reference.
You can stop here or you can view our full reference to see all the ways you can customize your importer.
Find this Angular example project in the Flatfile GitHub repository.