Get started with Angular

Use Seam Components with Angular

Overview

This guide will show you how to use Seam Components inside an Angular application. Seam Components are implemented in React, but may be used anywhere as native web components.

1 - Get a Publishable Key from the Seam Console

To access the Seam API, you'll need a publishable key. This key identifies your application when making requests to Seam and is safe to embed in your frontend code.

Go to console.seam.co and select "Client Sessions" from the sidebar. You should then see a "Publishable Key" that you can copy.

Publishable key

2 - Install @seamapi/react in your Angular application

Install the npm package

npm install --save @seamapi/react

Then import the custom elements bundle in you main.ts application entrypoint:

import "@seamapi/react/elements.js";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

3 — Wrap the web component in an Angular module

Create a new module named supported-device-table.module.ts with

import {
  Component,
  Input,
  NgModule,
  CUSTOM_ELEMENTS_SCHEMA,
} from "@angular/core";

@Component({
  selector: "supported-device-table",
  template:
    '<seam-supported-device-table [publishableKey]="publishableKey"></seam-supported-device-table>',
})
export class SupportedDeviceTable {
  @Input() publishableKey?: string;
}

@NgModule({
  declarations: [SupportedDeviceTable],
  exports: [SupportedDeviceTable],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SupportedDeviceTableModule {}

4 - Use the component

Include the new module in app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { SupportedDeviceTableModule } from "./supported-device-table.module";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SupportedDeviceTableModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Then use it in app.component.html:

<main>
  <supported-device-table
    [publishableKey]="'your_publishable_key'"
  ></supported-device-table>
</main>

You should see a list of device models like what's shown below:

Supported devices

Next Steps

If you have any questions or want to report an issue, email us at support@seam.co.

Last updated

Logo

© Seam Labs, Inc. All rights reserved.