Frameworks

Angular

A standalone component with two inputs: the file, and the viewer options.

The component

AperturaViewerComponent is standalone, so it is imported directly by whatever uses it rather than declared in a module. Its selector is apertura-viewer.

pane.component.ts

import { Component } from '@angular/core';
import { AperturaViewerComponent } from '@apertura/angular';
import type { ViewerOptions } from '@apertura/angular';

@Component({
  selector: 'app-pane',
  imports: [AperturaViewerComponent],
  template: `
    <input type="file" (change)="pick($event)" />
    <apertura-viewer [file]="file" [options]="options" style="height: 80vh" />
  `,
})
export class PaneComponent {
  file: File | undefined;
  options: ViewerOptions = { fit: 'width' };

  pick(event: Event) {
    this.file = (event.target as HTMLInputElement).files?.[0];
  }
}

Inputs

Input	Type	Notes
`file`	`ByteSourceInput \| undefined`	A `File`, a `Blob`, a byte buffer or a URL string. Setting it to `undefined` closes the document.
`options`	`ViewerOptions`	`fit`, `zoom`, `initialPage`, `registry`, `tolerant`, `password`.

Server-side rendering

Under Angular Universal, guard the component behind a platform check. There is no layout engine on the server, and the renderer has nothing it can do without one.