Angular Reference

The @pexelize/angular-editor package provides an Angular component and module for embedding the Pexelize editor.

Installation

npm install @pexelize/angular-editor @pexelize/editor-types

NgModule Setup

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PexelizeEditorModule } from '@pexelize/angular-editor';
import { AppComponent } from './app.component';

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

Standalone Setup (Angular 15+)

import { Component } from '@angular/core';
import { PexelizeEditorComponent } from '@pexelize/angular-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <pexelize-editor
      [options]="options"
      style="height: 100vh; display: block"
      (ready)="onReady()"
      (change)="onChange($event)"
    />
  `,
})
export class AppComponent {
  options = {
    user: { id: 'user-1', name: 'Jane', email: 'jane@example.com' },
    appearance: { theme: 'light' as const },
  };

  onReady() {
    console.log('Editor ready');
  }

  onChange(design: any) {
    console.log('Changed', design);
  }
}

Component Inputs

Input	Type	Required	Description
options	EditorOptions	Yes	Editor configuration. See Configuration.
design	DesignJson	No	Initial design JSON to load.

Component Outputs

Output	Event Type	Description
ready	void	Editor is fully initialized.
load	DesignJson	A design was loaded.
change	DesignJson	The design changed.
error	EditorError	An editor error occurred.
moduleSave	ModuleSaveData	A module was saved.
preview	PreviewData	The user clicked preview.
contentDialog	ContentDialogData	The content dialog opened.

@ViewChild Pattern

Access editor methods imperatively using @ViewChild:

import { Component, ViewChild } from '@angular/core';
import { PexelizeEditorComponent } from '@pexelize/angular-editor';
import type { DesignJson, ExportHtmlData, EditorOptions } from '@pexelize/editor-types';

@Component({
  selector: 'app-editor-page',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <div class="toolbar">
      <button (click)="exportHtml()" [disabled]="!isReady">Export HTML</button>
      <button (click)="undo()" [disabled]="!isReady">Undo</button>
      <button (click)="redo()" [disabled]="!isReady">Redo</button>
    </div>
    <pexelize-editor
      #editor
      [options]="options"
      style="height: calc(100vh - 48px); display: block"
      (ready)="onReady()"
    />
  `,
})
export class EditorPageComponent {
  @ViewChild('editor') editor!: PexelizeEditorComponent;

  isReady = false;

  options: EditorOptions = {
    user: { id: '1', name: 'Jane', email: 'jane@example.com' },
  };

  onReady() {
    this.isReady = true;
  }

  async exportHtml() {
    const html: ExportHtmlData = await this.editor.exportHtml();
    console.log(html);
  }

  undo() {
    this.editor.undo();
  }

  redo() {
    this.editor.redo();
  }

  save() {
    const design: DesignJson = this.editor.getDesign();
    // send to your backend
  }
}

Component Methods

Method	Signature	Description
loadDesign	(design: DesignJson) => void	Load a design.
getDesign	() => DesignJson	Get the current design JSON.
exportHtml	() => Promise<ExportHtmlData>	Export as HTML.
exportImage	(options?: ExportImageOptions) => Promise<ExportImageData>	Export as image.
exportPdf	(options?: ExportPdfOptions) => Promise<ExportPdfData>	Export as PDF.
undo	() => void	Undo last action.
redo	() => void	Redo last action.
setViewMode	(mode: ViewMode) => void	Switch desktop/tablet/mobile.
setTheme	(theme: ThemeMode) => void	Switch light/dark theme.
showPreview	() => void	Open preview modal.
hidePreview	() => void	Close preview modal.

TypeScript

Import types from @pexelize/editor-types:

import type {
  DesignJson,
  EditorOptions,
  ExportHtmlData,
  ExportImageData,
  ExportPdfData,
  ViewMode,
  ThemeMode,
} from '@pexelize/editor-types';

warning

The <pexelize-editor> element must have an explicit height. Add display: block and a height via styles, otherwise it collapses to zero.

tip

Use the standalone PexelizeEditorComponent import for Angular 15+ projects. Use PexelizeEditorModule for older NgModule-based projects.