Skip to main content
Integration Guide

Add ImageLayer to Angular

Add CUSTOM_ELEMENTS_SCHEMA to the relevant Angular module or standalone component, load the widget, and assign the publishable key and server-issued session token as properties.

Quick start

Install

npm install @imagelayer/widget

Embed

typescript
// image-generator.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@imagelayer/widget';

@Component({
  selector: 'app-image-generator',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <image-layer
      id="imagelayer-widget"
      api-url="https://api.imagelayer.app"
    />
  `,
})
export class ImageGeneratorComponent {}

Why Angular + ImageLayer

CUSTOM_ELEMENTS_SCHEMA support

Angular's built-in schema tells the compiler to accept unknown HTML elements. One line in your module or component decorator.

Works with standalone components

Angular 16+ standalone components work without NgModules. Add the schema to the component decorator and use the tag directly.

Zone.js compatible

The widget manages its own state with Lit and doesn't interfere with Angular's change detection or zone.js.

How it works

01

Set up workspace context

Add approved assets, colors, and optional guidance. Generated drafts still require review.

02

Embed and authenticate

Load the component in your Angular app and have your backend issue a tenant-scoped session token.

03

Admit eligible requests

Users can submit image, video, standalone audio, or text only when the current catalog, entitlement, credits, spend controls, provider, and billing mode allow it.

Plan the product workflow

Follow the end-to-end app integration tutorial.Review the REST API for session and generation flows.Match the embed to a social, commerce, content, or internal workflow.

Start building with Angular

Create a workspace to configure the widget and server-minted session tokens. No generation credits are included with the Free workspace.

Create Workspace