Angular Integration

SuperDoc works with Angular through direct DOM manipulation. No wrapper needed.

Install

npm install superdoc

Basic setup

import { Component, ElementRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

@Component({
  selector: 'app-editor',
  template: `<div #editor style="height: 700px"></div>`,
})
export class EditorComponent implements OnInit, OnDestroy {
  @ViewChild('editor', { static: true }) editorRef!: ElementRef;
  private superdoc: SuperDoc | null = null;

  ngOnInit() {
    this.superdoc = new SuperDoc({
      selector: this.editorRef.nativeElement,
      document: 'contract.docx',
      documentMode: 'editing',
    });
  }

  ngOnDestroy() {
    this.superdoc?.destroy();
  }
}

Full component

A reusable editor component with mode switching and export:

import { Component, ElementRef, ViewChild, Input, OnInit, OnDestroy } from '@angular/core';
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

@Component({
  selector: 'app-doc-editor',
  template: `
    <div class="controls">
      <button (click)="setMode('editing')">Edit</button>
      <button (click)="setMode('suggesting')">Review</button>
      <button (click)="setMode('viewing')">View</button>
      <button (click)="exportDoc()">Export</button>
    </div>
    <div #editor style="height: 700px"></div>
  `,
})
export class DocEditorComponent implements OnInit, OnDestroy {
  @ViewChild('editor', { static: true }) editorRef!: ElementRef;
  @Input() document!: File | string;
  @Input() user?: { name: string; email: string };

  private superdoc: SuperDoc | null = null;

  ngOnInit() {
    this.superdoc = new SuperDoc({
      selector: this.editorRef.nativeElement,
      document: this.document,
      documentMode: 'editing',
      user: this.user,
      onReady: () => console.log('Editor ready'),
    });
  }

  ngOnDestroy() {
    this.superdoc?.destroy();
  }

  setMode(mode: 'editing' | 'viewing' | 'suggesting') {
    this.superdoc?.setDocumentMode(mode);
  }

  async exportDoc() {
    await this.superdoc?.export({ isFinalDoc: true });
  }
}

Handle file uploads

@Component({
  selector: 'app-upload-editor',
  template: `
    <input type="file" accept=".docx" (change)="onFileChange($event)" />
    <div #editor style="height: 700px"></div>
  `,
})
export class UploadEditorComponent implements OnDestroy {
  @ViewChild('editor', { static: true }) editorRef!: ElementRef;
  private superdoc: SuperDoc | null = null;

  onFileChange(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (!file) return;

    this.superdoc?.destroy();
    this.superdoc = new SuperDoc({
      selector: this.editorRef.nativeElement,
      document: file,
      documentMode: 'editing',
    });
  }

  ngOnDestroy() {
    this.superdoc?.destroy();
  }
}

Next steps

• Configuration - Full configuration options
• Methods - All available methods
• Angular Example - Working example on GitHub