> ## Documentation Index
> Fetch the complete documentation index at: https://flatfileinc-remove-rss-json.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Flatfile

> 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.

## Before you begin

<Snippet file="shared/pk_needed.mdx" />

Follow prompts from the `new` command.

```bash theme={"system"}
ng new create-flatfile-angular-embed
```

```bash theme={"system"}
cd create-flatfile-angular-embed
```

```bash theme={"system"}
npm i @flatfile/angular-sdk @flatfile/plugin-record-hook @flatfile/listener
```

### Build your importer

### 1. Initialize Flatfile

In your `app.component.ts` you'll need to pass in a minimum of the
`publishableKey`.

<CodeGroup>
  ```TypeScript src/app/app.component.ts theme={"system"}
  import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterOutlet } from '@angular/router';
  import { SpaceModule, SpaceService, ISpace } from '@flatfile/angular-sdk';

  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, RouterOutlet, SpaceModule],
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'create-flatfile-angular-embed';
    showSpace: boolean = false;

    constructor(private spaceService: SpaceService) {}

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

    closeSpace() {
      this.showSpace = false;
    }

    spaceProps: ISpace = {
      name: 'my space!',
      publishableKey: 'pk_1234',
      closeSpace: {
        operation: 'submitActionFg',
        onClose: this.closeSpace.bind(this),
      },
      displayAsModal: true,
    }
  }
  ```

  ```html src/app/app.component.html theme={"system"}
  <main class="main">
    <div class="description">
      <button (click)="toggleSpace()">
        {{ showSpace ? 'Close' : 'Open' }} space
      </button>
    </div>
    <div class="spaceWrapper" *ngIf="showSpace">
      <flatfile-space [spaceProps]="spaceProps"></flatfile-space>
    </div>
  </main>
  ```
</CodeGroup>

### 2. Start your client

Now, start your front end by heading to the terminal and running the following
command.

```bash theme={"system"}
  npm run start
```

### 3. Build a workbook

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.

<CodeGroup>
  ```TypeScript src/config.ts theme={"system"}
    import { Flatfile } from "@flatfile/api";

    export const config: Pick<
      Flatfile.CreateWorkbookConfig,
      "name" | "sheets" | "actions"
    > = {
      name: "Employees workbook",
      sheets: [
        {
          name: "TestSheet",
          slug: "TestSheet",
          fields: [
            {
              key: "first_name",
              type: "string",
              label: "First name",
              constraints: [
                {
                  type: "required",
                },
              ],
            },
            {
              key: "last_name",
              type: "string",
              label: "last name",
            },
            {
              key: "email",
              type: "string",
              label: "Email",
            },
          ],
          actions: [
            {
              label: "Join fields",
              operation: "TestSheet:join-fields",
              description: "Would you like to join fields?",
              mode: "foreground",
              confirm: true,
            },
          ],
        },
      ],
      actions: [
        {
          label: "Submit",
          operation: "TestSheet:submit",
          description: "Would you like to submit your workbook?",
          mode: "foreground",
          primary: true,
          confirm: true,
        },
      ],
    };

  ```

  ```TypeScript src/app/app.component.ts theme={"system"}
  spaceProps: ISpace = {
      name: 'my space!',
      publishableKey: 'pk_1234',
      closeSpace: {
        operation: 'submitActionFg',
        onClose: this.closeSpace.bind(this),
      },
      displayAsModal: true,
      workbook: config,
    };
  ```
</CodeGroup>

### 4. Transform Data

Next, we'll listen for data changes and respond using an event listener.

1. Add a `src/listeners/listener.ts` file with this simple `recordHook`.
2. Update `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](/learning-center/guides/handling-data)

<CodeGroup>
  ```TypeScript src/listeners/listener.ts theme={"system"}
  import api from "@flatfile/api";
  import { FlatfileListener } from "@flatfile/listener";
  import { recordHook } from "@flatfile/plugin-record-hook";

  /**
   * Example Listener
   */
  export const listener = FlatfileListener.create((listener) => {
    //note: listening to all events with a wildcard can be used while testing but is not
    //recommended for production, as it will capture all events and may cause performance issues
    listener.on("**", (event) => {
      console.log(`Received event:`, event);
    });

    listener.use(
      recordHook("contacts", (record) => {
        const firstName = record.get("firstName");
        console.log({ firstName });
        record.set("lastName", "Rock");
        return record;
      })
    );

    listener.filter({ job: "workbook:submitActionFg" }, (configure) => {
      configure.on("job:ready", async ({ context: { jobId } }) => {
        try {
          await api.jobs.ack(jobId, {
            info: "Getting started.",
            progress: 10,
          });

          // Make changes after cells in a Sheet have been updated
          console.log("Make changes here when an action is clicked");

          await api.jobs.complete(jobId, {
            outcome: {
              acknowledge: true,
              message: "This is now complete.",
              next: {
                type: "wait",
              },
            },
          });
        } catch (error: any) {
          console.error("Error:", error.stack);

          await api.jobs.fail(jobId, {
            outcome: {
              message: "This job encountered an error.",
            },
          });
        }
      });
    });
  });
  ```

  ```TypeScript src/app/app.component.ts theme={"system"}
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, RouterOutlet, SpaceModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
  })
  export class AppComponent {
    title = 'create-flatfile-angular-embed';
    showSpace: boolean = false;

    constructor() {}

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

    closeSpace() {
      this.showSpace = false;
    }

    spaceProps: ISpace = {
      name: 'my space!',
      publishableKey: 'pk_1234',
      closeSpace: {
        operation: 'submitActionFg',
        onClose: this.closeSpace.bind(this),
      },
      displayAsModal: true,
      workbook: config,
      listener
    }
  }
  ```
</CodeGroup>

### 5. Match your brand

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](/learning-center/guides/theming).

```typescript theme={"system"}
  themeConfig: {
    root: {
      primaryColor: "red",
      textColor: "white",
      logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg",
    },
  },
```

### 6. Add customizations

You can stop here or you can [view our full reference](../reference/common) to
see all the ways you can customize your importer.

## Example Project

Find this Angular example project in the Flatfile GitHub repository.

<CardGroup cols={1}>
  <Card title="create-flatfile-angular" icon="angular" href="https://github.com/FlatFilers/create-flatfile-angular">
    Clone the Flatfile Angular tutorial here.
  </Card>
</CardGroup>