Integrations

Angular integration

Install one package, import it, and mount the viewer. The render engine, its worker, and (for the framework wrappers) React all come bundled — nothing else to configure.

01 / Live preview

Open the full interactive demo →

This is the actual Angular app built from the code below, running live in an iframe.

02 / Install

npm install @trupdf/angular

03 / Example

import {
  Component,
  ElementRef,
  Input,
  ViewChild,
  type AfterViewInit,
  type OnChanges,
  type OnDestroy,
} from '@angular/core';
// One import, one package. mountTruPDF mounts the viewer into any element and
// returns a handle with update()/unmount(); react / react-dom / the render
// engine and its worker all come bundled with @trupdf/angular.
import { mountTruPDF, type MountHandle } from '@trupdf/angular';

@Component({
  selector: 'app-trupdf-viewer',
  standalone: true,
  template: '<div #host style="width:100%;height:100%"></div>',
})
export class TruPdfViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
  @Input() source!: string | ArrayBuffer;
  @Input() secureMode = false;

  @ViewChild('host', { static: true }) host!: ElementRef<HTMLDivElement>;
  private handle?: MountHandle;

  ngAfterViewInit(): void {
    this.handle = mountTruPDF(this.host.nativeElement, {
      source: this.source,
      secureMode: this.secureMode,
      theme: 'system',
    });
  }

  ngOnChanges(): void {
    // Re-render on @Input change without tearing down the React root.
    this.handle?.update({
      source: this.source,
      secureMode: this.secureMode,
      theme: 'system',
    });
  }

  ngOnDestroy(): void {
    this.handle?.unmount();
  }
}