seatsio-angular, the official Seats.io Angular wrapper

Angular wrapper for rendering Seats.io seating charts. Brought to you by the Seats.io team.

The minimum Angular version is the current lowest LTS version (currently: 11.0.0). Lower versions may work, but are not officially supported.

Installation

npm install --save @seatsio/seatsio-angular

Usage

Import SeatsioAngularModule in your own module:

import { SeatsioAngularModule } from '@seatsio/seatsio-angular';

@NgModule({
  ...
  imports: [
    SeatsioAngularModule
  ]
  ...
})

Regular charts

Minimal

Make sure you expose config in your component. For example:

config = {
    region: "<yourRegion>", // e.g. "eu"
    workspaceKey: "<yourWorkspacePublicKey>",
    event: "<yourEventKey>"
  }

<div style="height: 500px">
  <si-seatsio-seating-chart [config]="config"></si-seatsio-seating-chart>
</div>

The chart uses 100% of the width and height of the DOM element (e.g. a div) in which you render it. Play with the size of that element to change the chart size.

onRenderStarted

onRenderStarted is fired when the chart has started loading, but hasn't rendered yet:

config = {
  region: "<yourRegion>",
  workspaceKey: "<yourWorkspacePublicKey>",
  event: "<yourEventKey>",
  onRenderStarted: (chart) => {
    console.info('Render Started')
  }
}

If you store the chart object that's passed to onRenderStarted, you can access the properties defined on the wrapped seatsio.SeatingChart:

let chart = null

config = {
    region: "<yourRegion>",
    workspaceKey: "<yourWorkspacePublicKey>",
    event: "<yourEventKey>",
    onRenderStarted: createdChart => { chart = createdChart }
}

onChartRendered

onChartRendered is fired when the chart is rendered successfully:

config = {
    region: "<yourRegion>",
    workspaceKey: "<yourWorkspacePublicKey>",
    event: "<yourEventKey>",
    onRenderRendered: (chart) => {
      console.info('Render Finished')
    }
}

Other parameters

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/renderer/embed-a-floor-plan

config = {
    region: "<yourRegion>",
    workspaceKey: "<yourWorkspacePublicKey>",
    event: "<yourEventKey>",
    pricing: [
        {'category': 1, 'price': 30},
        {'category': 2, 'price': 40},
        {'category': 3, 'price': 50}
    ],
    priceFormatter: price => ('$' + price)
}

Event manager

eventManagerConfig = {
  region: "<yourRegion>",
  secretKey: "<yourWorkspaceSecretKey>",
  event: "<yourEventKey>",
  mode: "<manageObjectStatus or another mode>"
}

<div style="height: 500px">
    <si-seatsio-event-manager [config]="eventManagerConfig"></si-seatsio-event-manager>
</div>

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/event-manager-configuring

Chart manager

chartManagerConfig = {
  region: "<yourRegion>",
  secretKey: "<yourWorkspaceSecretKey>",
  chart: "<yourChartKey>",
  mode: "manageRulesets"
}

<div style="height: 500px">
    <si-seatsio-chart-manager [config]="chartManagerConfig"></si-seatsio-chart-manager>
</div>

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/chart-manager-configuring

Seating Chart Designer

To embed the seating chart designer for the purpose of creating a new chart, do this:

seatingChartConfig = {
  region: "<yourRegion>",
  workspaceKey: "<yourWorkspacePublicKey>",
  event: "<yourEventKey>",
  onRenderStarted: () => {
    console.info('Render Started')
  },
  onChartRendered: () => {
    console.info('Render Finished')
  },
  priceFormatter: price => ('$' + price)
}

<div style="height: 500px">
    <si-seatsio-designer [config]="seatingChartConfig"></si-seatsio-designer>
</div>

To be able to edit a chart from an embedded designer, you need to specify the chart to load:

seatingChartConfig = {
  region: "<yourRegion>",
  workspaceKey: "<yourWorkspacePublicKey>",
  event: "<yourEventKey>",
  chartKey: "<yourChartKey>",
  onRenderStarted: () => {
    console.info('Render Started')
  },
  onChartRendered: () => {
    console.info('Render Finished')
  },
  priceFormatter: price => ('$' + price)
}

Other parameters

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer/introduction