Comment on page
Get started with Angular
Use Seam Components with Angular
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.
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.
Install the npm package
npm install --save @seamapi/react
# or via yarn
yarn add @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));
Create a new module named
supported-device-table.module.ts withimport {
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 {}
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:
If you have any questions or want to report an issue, email us at [email protected].
Last modified 4mo ago