Skip to content

angular.md

Latest commit

 

History

History
73 lines (57 loc) · 1.49 KB

angular.md

File metadata and controls

73 lines (57 loc) · 1.49 KB
Raw

Angular

Mount after the view is ready. Destroy the handle when the component is destroyed.

1. Install

npm install github:aneebji/html-editor#v1.1.0

2. Component

import {
  AfterViewInit,
  Component,
  ElementRef,
  Input,
  OnChanges,
  OnDestroy,
  SimpleChanges,
  ViewChild,
} from "@angular/core";
import { mount, type StudioHandle } from "html-device-preview";

@Component({
  selector: "app-viewport-lab",
  standalone: true,
  template: `<div #host class="viewport-lab"></div>`,
  styles: [`.viewport-lab { height: 820px; min-height: 640px; }`],
})
export class ViewportLabComponent implements AfterViewInit, OnChanges, OnDestroy {
  @ViewChild("host", { static: true }) host!: ElementRef<HTMLElement>;
  @Input() html = "";
  @Input() filename = "Untitled.html";

  private studio: StudioHandle | null = null;

  ngAfterViewInit(): void {
    this.studio = mount(this.host.nativeElement, {
      html: this.html,
      filename: this.filename,
      height: "820px",
    });
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (!this.studio) return;
    if (changes["html"]) this.studio.setHtml(this.html);
    if (changes["filename"]) this.studio.setFilename(this.filename);
  }

  ngOnDestroy(): void {
    this.studio?.destroy();
  }

  getHtml(): string {
    return this.studio?.getHtml() ?? "";
  }
}

3. Template

<app-viewport-lab [html]="page.html" [filename]="page.filename" />

New pages should bind html to ''.

Next