---
title: "Angular seating chart"
description: "Install @seatlayer/angular, render an interactive Angular seating chart with live availability and seat selection, create holds, and book on your server."
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.seatlayer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular seating chart

The official SeatLayer Angular seating chart component adds an interactive
seat map and seat picker to reserved-seating apps built with Angular. The
[`@seatlayer/angular` package](https://www.npmjs.com/package/@seatlayer/angular)
ships a standalone component with typed inputs, outputs, and an imperative
API for live availability, seat selection, temporary holds, and
best-available seating.

[Inspect the Angular source](https://github.com/seatlayer/seatlayer-sdk),
learn about the [SeatLayer reserved-seating platform](https://seatlayer.io/),
or try the [browser seat-map demo](https://app.seatlayer.io/demo/play/grand-theatre).

> **The app selects and holds; your server books**
>
> Never put a SeatLayer secret key in browser code. Send the opaque hold id to
> your trusted backend, inspect the hold there, calculate the charge from
> server data, and book with a stable `bookingRef`.

## Install the package

```bash
npm install @seatlayer/angular
```

The package ships in Angular Package Format with bundled TypeScript types.

## Render a seating chart

Import the standalone component and bind your event:

```ts
import { Component } from '@angular/core';
import { SeatingChartComponent } from '@seatlayer/angular';

@Component({
  standalone: true,
  imports: [SeatingChartComponent],
  template: `
    <seatlayer-seating-chart
      [event]="'ev_your_event_key'"
      [currency]="'USD'"
      (selectionChanged)="updateBasket($event)"
      (holdExpired)="returnBuyerToMap()"
    />
  `,
})
export class EventSeatMapComponent {}
```

The component renders a plain `div` in your DOM — no iframe — and runs chart
events outside Angular's zone, so live seat updates never thrash change
detection.

## Select, hold, and hand off checkout

Keep the security boundary explicit:

- The browser selects seats and creates a temporary hold.
- Your backend inspects the hold and derives the amount to charge.
- Your payment and order workflow stays on your server.
- Your backend books with a stable `bookingRef` so retries are safe.

Continue with [holds and checkout](/buyer-sdk/holds-and-checkout) before
connecting a production order flow.

## Frequently asked questions

### Is this a real Angular component or an iframe?

The seating chart is a standalone Angular component rendering a plain `div`
and driving the buyer renderer directly — no iframe. Inputs, outputs, and the
imperative API are all typed.

### How do temporary seat holds work?

Selecting seats creates a temporary hold that reserves inventory against
concurrent buyers for a limited window. The hold expires automatically if
checkout does not complete — the hold-expired output tells the app to return
the buyer to the map — and holds can be extended or resumed for longer
checkouts.

### Can I use my own payment provider?

Yes. SeatLayer never processes payment inside the seat map. The browser hands
the hold id to your backend, and your backend charges through any payment
provider you already use before booking the hold.

### Is there a React or Vue version?

Yes — [`@seatlayer/react`](https://www.npmjs.com/package/@seatlayer/react)
and [`@seatlayer/vue`](https://www.npmjs.com/package/@seatlayer/vue) share
the same typed contract, and
[`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js) covers any
framework or none.

## Next steps

- [Install @seatlayer/angular on npm](https://www.npmjs.com/package/@seatlayer/angular)
- [Run or inspect the SDK source](https://github.com/seatlayer/seatlayer-sdk)
- [Understand the SeatLayer platform](https://seatlayer.io/)
- [Connect holds to secure checkout](/buyer-sdk/holds-and-checkout)

Source: https://docs.seatlayer.io/buyer-sdk/angular/index.mdx