Platforms

Angular

A standalone component, published in partial-Ivy form by ng-packagr.

The component is standalone and OnPush, and the document is mounted straight into the host element. State and events are re-entered into the Angular zone, so subscribers see updates without a manual change-detection run.

pane.component.ts

import { Component } from '@angular/core';
import { GenomViewerComponent } from '@genomdev/angular';
import { docx, pdf } from '@genomdev/genom/lazy';

@Component({
  selector: 'app-pane',
  standalone: true,
  imports: [GenomViewerComponent],
  template: `
    <genom-viewer
      [file]="file"
      [formats]="formats"
      [options]="{ fit: 'width' }"
      (pageChange)="onPage($event)"
      (documentOpen)="onOpen($event)"
      (viewerError)="onError($event)"
    />
  `,
})
export class PaneComponent {
  file?: File;
  readonly formats = [docx, pdf];

  onPage({ index, total }: { index: number; total?: number }) {}
}

Which Angular

The library is compiled with Angular 21 in partial compilation mode, which means it works in Angular 21 and later. The rule is the consumer’s linker must not be older than the library’s compiler, so building against the newest release would have cut off the previous one for no gain.

The peer range says >=21 and means it.

Install

npm

npm i @genomdev/angular @genomdev/core @genomdev/genom

@genomdev/core is a peer dependency, so npm and pnpm place exactly one copy of it in your tree. With Yarn, add it yourself.