Skip to main content
Integration Guide

Add ImageLayer to Angular

Angular supports Web Components through the CUSTOM_ELEMENTS_SCHEMA. Add the schema to your module or standalone component, then use the image-layer tag in any template to ship image, video, voice, and text workflows.

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
      api-key="il_live_your_key_here"
      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 your brand kit

Upload logo, pick colors, set AI brand guidelines. Five minutes.

02

Embed the widget

Drop one <image-layer> tag into your Angular app. That's the entire integration.

03

Your users start creating

Users open one embedded workflow and generate on-brand images, video, voiceovers, or text inside your product.

Start building with Angular

Free plan. No credit card. Most teams go live in under 15 minutes.

Embed Your First Widget Free