Syncfusion AI Assistant

How can I help you?

Migrating from Nutrient Web SDK to Syncfusion Angular PDF Viewer

17 Apr 20265 minutes to read

This guide helps you migrate an Angular application built using Nutrient Web SDK (formerly PSPDFKit Web SDK) to the Syncfusion Angular PDF Viewer. It mirrors the React migration guide but is tailored specifically for Angular architecture, modules, and component life cycle.

The objective is to replace the imperative SDK-based initialization used by Nutrient with the declarative Angular component model provided by Syncfusion.

Overview

Aspect Nutrient Web SDK Syncfusion Angular PDF Viewer
Integration style SDK initialization via load() Declarative Angular component
Framework pattern Framework-agnostic Native Angular component
UI SDK-provided UI Built-in Angular toolbar
Annotations & forms SDK APIs Angular services & APIs
Hosting Local / CDN Fully client-side

Architectural Differences

Nutrient Web SDK (PSPDFKit)

  • Viewer mounted imperatively into a DOM element
  • Manual life cycle handling (load, unload)
  • SDK-managed UI and events

Syncfusion Angular PDF Viewer

  • Viewer rendered using <ejs-pdfviewer> component
  • Life cycle managed by Angular
  • Features enabled via service injection
  • Events bound using Angular outputs

Installation

Nutrient Web SDK

npm install @nutrient-sdk/viewer

Or include the SDK via CDN in index.html.

Syncfusion Angular PDF Viewer

npm install @syncfusion/ej2-angular-pdfviewer

Install required dependencies:

npm install @syncfusion/ej2-base @syncfusion/ej2-buttons @syncfusion/ej2-dropdowns @syncfusion/ej2-inputs @syncfusion/ej2-navigations @syncfusion/ej2-popups @syncfusion/ej2-splitbuttons

Angular Module Setup

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PdfViewerModule } from '@syncfusion/ej2-angular-pdfviewer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, PdfViewerModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Viewer Initialization Comparison

Nutrient Web SDK (Angular)

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

declare const NutrientViewer: any;

@Component({
  selector: 'app-old-viewer',
  template: '<div #container style="height:100vh"></div>'
})
export class OldViewerComponent implements AfterViewInit {
  @ViewChild('container', { static: true }) container!: ElementRef;

  ngAfterViewInit(): void {
    NutrientViewer.load({
      container: this.container.nativeElement,
      document: '/assets/sample.pdf'
    });
  }
}

Syncfusion Angular PDF Viewer

<ejs-pdfviewer id="pdfViewer"
    [documentPath]='https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
    [resourceUrl]='https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib'
    style="height:640px;display:block">
</ejs-pdfviewer>

Feature Enablement

Features are enabled automatically or via service injection:

import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  FormFieldsService
} from '@syncfusion/ej2-angular-pdfviewer';

@NgModule({
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    FormFieldsService
  ]
})

Feature checklist (Syncfusion)

Event Handling

Nutrient Web SDK

Check Events Guide to know more about event handling in Apryse.

instance.addEventListener('documentLoaded', () => {
  console.log('Document loaded');
});

Syncfusion Viewer

Check Syncfusion Events Guide to know more about event handling in Syncfusion React PDF Viewer.

<ejs-pdfviewer
  (documentLoad)="onDocumentLoad()"
  (pageChange)="onPageChange($event)">
</ejs-pdfviewer>
onDocumentLoad(): void {
  console.log('Document loaded');
}

onPageChange(args: any): void {
  console.log(args.currentPageNumber);
}

Minimal Migration Steps

  1. Remove Nutrient SDK setup
  2. Add Syncfusion PDF Viewer packages
  3. Configure Angular module
  4. Replace SDK initialization with <ejs-pdfviewer>
  5. Re-map events and APIs

Reference: key Syncfusion PdfViewerComponent methods & events

See Also